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

这篇文章主要介绍了微信小程序怎么使用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();

关于“微信小程序怎么使用slider实现音频进度条”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“微信小程序怎么使用slider实现音频进度条”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。