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

微信⼩程序：⽤slider实现⾳频的进度条

众所周知哈，微信⼩程序⾥⾯的⾳频播放是没有进度条的，但最近有个项⽬呢，客户要求⾳频要有进度条控制，所以就想到了⽤slider来实

现⾳频的进度条显⽰及控制

微信⼩程序的slider组件，他长这样

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

下⾯上代码

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

{{playtime}} / {{alltime}}

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

var _lf = this;

var innerAudioContext = udioContext;

lay(() => {

//初始化duration

on

tTimeout(function () {

//延时获取⾳频真正的duration

var duration = on;

var min = parInt(duration / 60);

var c = parInt(duration % 60);

if (ng().length == 1) {

min = `0${min}`;

}

if (ng().length == 1) {

c = `0${c}`;

}

_a({

audioDuration: duration,

alltime: `${min}:${c}`

});

}, 1000)

})

下⾯就是开始播放的时候设置⼀个定时器，每⼀秒更新进度条的百分⽐，显⽰当前播放的时间，停⽌的时候把计时器停⽌就可以了，这样播

放就完成了

//设置⼀个计步器

clearInterval(onIntval);

onIntval = tInterval(function () {

//当⾳频在播放时执⾏

if (_g) {

//获取⾳频的播放时间，进度百分⽐

var ek = _eek;

var duration = on;

//当⾳频在播放时，每隔⼀秒⾳频播放时间+1，并计算分钟数与秒数

var min = parInt((ek + 1) / 60);

var c = parInt((ek + 1) % 60);

if (ng().length == 1) {

min = `0${min}`;

}

if (ng().length == 1) {

c = `0${c}`;

}

//当进度条完成，停⽌播放，并重设播放时间和进度条

var time = _ime;

time = parInt(100 * ek / duration);

if (time >= 100) {

();

_a({

audioSeek: 0,

audioTime: 0,

audioDuration: duration,

playing: 0,

playtime: `00:00`,

});

return fal;

} el {

//正常播放，更改进度信息，更改播放时间信息

_a({

audioSeek: ek + 1,

audioTime: time,

audioDuration: duration,

playtime: `${min}:${c}`

});

}

}

(_);

}, 1000);

下⾯就是要处理进度条的拖动事件，这个就⽐较简单了，就是获取进度条的百分⽐，转换成相应的播放时间，跳转到⾳频相应的时间进⾏播

放就可以了

var _lf = this;

//获取进度条百分⽐

var value = ;

_a({

audioTime: value

});

var duration = _uration;

//根据进度条百分⽐及歌曲总时间，计算拖动位置的时间

value = parInt(value * duration / 100);

(value);

//更改状态

_a({

audioSeek: value

});

var innerAudioContext = _udioContext;

//调⽤ek⽅法跳转⾳频时间

(value);

//播放⾳频

();

这样就完成收⼯了