微信小程序：用slider實現(xiàn)音頻的進度條

微信?程序：?slider實現(xiàn)?頻的進度條

眾所周知哈，微信?程序??的?頻播放是沒有進度條的，但最近有個項?呢，客戶要求?頻要有進度條控制，所以就想到了?slider來實

現(xiàn)?頻的進度條顯?及控制

微信?程序的slider組件，他長這樣

長的跟進度條還是蠻相似的

下?上代碼

slider是進度條，bindchange是slider的拖動事件，playtime 已播放時間，alltime 總時間

{{playtime}} / {{alltime}}

?先要初始化?個?頻播放器，然后要獲取?頻的總時長duration，然后需要把這個時長轉(zhuǎn)換成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 () {

//當?頻在播放時執(zhí)?

if (_g) {

//獲取?頻的播放時間，進度百分?

var ek = _eek;

var duration = on;

//當?頻在播放時，每隔?秒?頻播放時間+1，并計算分鐘數(shù)與秒數(shù)

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);

下?就是要處理進度條的拖動事件，這個就?較簡單了，就是獲取進度條的百分?，轉(zhuǎn)換成相應的播放時間，跳轉(zhuǎn)到?頻相應的時間進?播

放就可以了

var _lf = this;

//獲取進度條百分?

var value = ;

_a({

audioTime: value

});

var duration = _uration;

//根據(jù)進度條百分?及歌曲總時間，計算拖動位置的時間

value = parInt(value * duration / 100);

(value);

//更改狀態(tài)

_a({

audioSeek: value

});

var innerAudioContext = _udioContext;

//調(diào)?ek?法跳轉(zhuǎn)?頻時間

(value);

//播放?頻

();

這樣就完成收?了