微信小程序使用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();
这样就完成收工了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
这是本人2007年进行的一项研究,当时网络上没有什么既精简又实用的循环滚动代码,所以就自己琢磨了段时间,最终找到这个办法2011-09-09
最新评论