微信小程序使用slider实现音频进度条

 更新时间:2022年06月30日 17:07:19   作者:北城码农  
这篇文章主要为大家详细介绍了微信小程序使用slider实现音频进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

众所周知哈,微信小程序里面的音频播放是没有进度条的,但最近有个项目呢,客户要求音频要有进度条控制,所以就想到了用slider来实现音频的进度条显示及控制

微信小程序的slider组件,效果如图:

长的跟进度条还是蛮相似的。

下面上代码 

slider是进度条,bindchange是slider的拖动事件,playtime 已播放时间,alltime 总时间

<view class='slider'>
    <slider bindchange='sliderChange' activeColor='red' block-size="12" value='{{audioTime}}' />
</view>
<view class='time'>
    {{playtime}} / {{alltime}}
</view>

首先要初始化一个音频播放器,然后要获取音频的总时长duration,然后需要把这个时长转换成00:00这样的格式显示

var _self = this;
var innerAudioContext = this.data.innerAudioContext;
innerAudioContext.onCanplay(() => {
   //初始化duration
  innerAudioContext.duration
  setTimeout(function () {
      //延时获取音频真正的duration
      var duration = innerAudioContext.duration;
      var min = parseInt(duration / 60);
      var sec = parseInt(duration % 60);
      if (min.toString().length == 1) {
        min = `0${min}`;
      }
      if (sec.toString().length == 1) {
        sec = `0${sec}`;
      }
      _self.setData({
         audioDuration: duration,
         alltime: `${min}:${sec}`
      });
   }, 1000)
})

下面就是开始播放的时候设置一个定时器,每一秒更新进度条的百分比,显示当前播放的时间,停止的时候把计时器停止就可以了,这样播放就完成了

//设置一个计步器
clearInterval(this.data.durationIntval);
    this.data.durationIntval = setInterval(function () {
      //当音频在播放时执行
      if (_self.data.playing) {
        //获取音频的播放时间,进度百分比
        var seek = _self.data.audioSeek;
        var duration = innerAudioContext.duration;
        //当音频在播放时,每隔一秒音频播放时间+1,并计算分钟数与秒数
        var min = parseInt((seek + 1) / 60);
        var sec = parseInt((seek + 1) % 60);
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }        
        //当进度条完成,停止播放,并重设播放时间和进度条        
        var time = _self.data.audioTime;
        time = parseInt(100 * seek / duration);
        if (time >= 100) {
          innerAudioContext.stop();
          _self.setData({
            audioSeek: 0,
            audioTime: 0,
            audioDuration: duration,
            playing: 0,
            playtime: `00:00`,
          });
          return false;
        } else {
          //正常播放,更改进度信息,更改播放时间信息
          _self.setData({
            audioSeek: seek + 1,
            audioTime: time,
            audioDuration: duration,
            playtime: `${min}:${sec}`
          });
        }
      }
      console.log(_self.data);
    }, 1000);

下面就是要处理进度条的拖动事件,这个就比较简单了,就是获取进度条的百分比,转换成相应的播放时间,跳转到音频相应的时间进行播放就可以了

var _self = this;
    //获取进度条百分比
    var value = e.detail.value;
    _self.setData({
      audioTime: value
    });
    var duration = _self.data.audioDuration;
    //根据进度条百分比及歌曲总时间,计算拖动位置的时间
    value = parseInt(value * duration / 100);
    console.log(value);
    //更改状态
    _self.setData({
      audioSeek: value
    });
    var innerAudioContext = _self.data.innerAudioContext;
    //调用seek方法跳转音频时间
    innerAudioContext.seek(value);
    //播放音频
    innerAudioContext.play();

这样就完成收工了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS判断文本框内容改变事件的简单实例

    JS判断文本框内容改变事件的简单实例

    本篇文章主要是对JS判断文本框内容改变事件的简单实例进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • JavaScript 实现下雪特效的示例代码

    JavaScript 实现下雪特效的示例代码

    这篇文章主要介绍了JavaScript 实现下雪特效的示例代码,帮助大家利用JavaScript制作特效,感兴趣的朋友可以了解下
    2020-09-09
  • fabric.js实现diy明信片功能

    fabric.js实现diy明信片功能

    这篇文章主要为大家详细介绍了fabric.js实现diy明信片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码

    分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码

    这是本人2007年进行的一项研究,当时网络上没有什么既精简又实用的循环滚动代码,所以就自己琢磨了段时间,最终找到这个办法
    2011-09-09
  • uniapp小视频项目开发之滑动播放视频

    uniapp小视频项目开发之滑动播放视频

    最近在工作中遇到了一个视频播放的需求,所以下面这篇文章主要给大家介绍了关于uniapp小视频项目开发之滑动播放视频的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 详解如何利用JavaScript绘制堆叠柱状图

    详解如何利用JavaScript绘制堆叠柱状图

    堆叠柱状图将每个柱子进行分割以显示相同类型下各个数据的大小情况。可以形象得展示一个大分类包含的每个小分类的数据,以及各个小分类的占比,显示的是单个项目与整体之间的关系。本文将利用JavaScript实现堆叠柱状图的绘制,需要的可以参考一下
    2022-03-03
  • Bootstrap中的Panel和Table全面解析

    Bootstrap中的Panel和Table全面解析

    这篇文章主要介绍了Bootstrap中的Panel和Table全面解析的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JS自动适应的图片弹窗实例

    JS自动适应的图片弹窗实例

    这篇文章介绍了JS自动适应的图片弹窗实例代码,有需要的朋友可以参考一下
    2013-06-06
  • javascript特殊文本输入框网页特效

    javascript特殊文本输入框网页特效

    这篇文章主要为大家详细介绍了javascript特殊文本输入框网页特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Bpmn.js activiti 流程编辑器详细教程

    Bpmn.js activiti 流程编辑器详细教程

    流程编辑器是一种用于创建、编辑和管理流程图的工具,它提供了一个可视化的界面,使用户能够以图形化的方式定义和配置流程的各个步骤、条件和流程间的关系,说明关于bpmn.js的一些事件, 通过本文你可以了解到,感兴趣的朋友一起看看吧
    2023-10-10

最新评论