微信小程序使用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实现音频进度条的详细内容...