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

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

文章图片

长的跟进度条还是蛮相似的。
下面上代码
slider是进度条，bindchange是slider的拖动事件，playtime 已播放时间，alltime 总时间

{{playtime}} / {{alltime}}

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

var _self = this; var innerAudioContext = this.data.innerAudioContext; innerAudioContext.onCanplay(() => {//初始化durationinnerAudioContext.durationsetTimeout(function () {//延时获取音频真正的durationvar 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 = https://www.it610.com/article/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();

这样就完成收工了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。