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

更新時間：2022年06月30日 17:07:19 作者：北城碼農(nóng)

這篇文章主要為大家詳細介紹了微信小程序使用slider實現(xiàn)音頻進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

眾所周知哈，微信小程序里面的音頻播放是沒有進度條的，但最近有個項目呢，客戶要求音頻要有進度條控制，所以就想到了用slider來實現(xiàn)音頻的進度條顯示及控制

微信小程序的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，然后需要把這個時長轉(zhuǎn)換成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)
})

下面就是開始播放的時候設(shè)置一個定時器，每一秒更新進度條的百分比，顯示當前播放的時間，停止的時候把計時器停止就可以了，這樣播放就完成了

//設(shè)置一個計步器
clearInterval(this.data.durationIntval);
? ? this.data.durationIntval = setInterval(function () {
? ? ? //當音頻在播放時執(zhí)行
? ? ? if (_self.data.playing) {
? ? ? ? //獲取音頻的播放時間，進度百分比
? ? ? ? var seek = _self.data.audioSeek;
? ? ? ? var duration = innerAudioContext.duration;
? ? ? ? //當音頻在播放時，每隔一秒音頻播放時間+1，并計算分鐘數(shù)與秒數(shù)
? ? ? ? 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}`;
? ? ? ? } ? ? ? ?
? ? ? ? //當進度條完成，停止播放，并重設(shè)播放時間和進度條 ? ? ? ?
? ? ? ? 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);

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

var _self = this;
? ? //獲取進度條百分比
? ? var value = e.detail.value;
? ? _self.setData({
? ? ? audioTime: value
? ? });
? ? var duration = _self.data.audioDuration;
? ? //根據(jù)進度條百分比及歌曲總時間，計算拖動位置的時間
? ? value = parseInt(value * duration / 100);
? ? console.log(value);
? ? //更改狀態(tài)
? ? _self.setData({
? ? ? audioSeek: value
? ? });
? ? var innerAudioContext = _self.data.innerAudioContext;
? ? //調(diào)用seek方法跳轉(zhuǎn)音頻時間
? ? innerAudioContext.seek(value);
? ? //播放音頻
? ? innerAudioContext.play();

這樣就完成收工了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: