微信小程序使用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();
這樣就完成收工瞭。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。