需求：顯示音樂播放按鈕、可手動拖拽進度條；頁面中含多個音樂，播放當前音樂時暫停其他音樂播放。
小程序自帶標簽 audio
小程序自帶的audio標簽含固定的樣式，且有最小尺寸。目前項目也不含name和author字段，所以放棄audio標簽。
實現效果圖
初始化音樂數據
<text>{{currentProcess}}</text><slider bindchange="" bindtouchstart="" bindtouchend="" max="{{totalProcessNum}}" min="0" value="{{currentProcessNum}}" disabled="{{canSlider}}"></slider><text>{{totalProcess}}</text><image src="{{audioListObj['q'+questionObj.id].imgUrl}}" data-audioId="q{{questionObj.id}}" bindtap="clickPlayAudio"></image> <!-- clickPlayAudio 播放按鈕觸發事件 -->src: _this.data.questionObj.audio,currentProcess: '--:--',//顯示 將currentProcessNum處理成時間形式展示currentProcessNum: 0,//賦值totalProcess: '--:--',totalProcessNum: 1,seek: -1,imgUrl: '../../images/play.png',canSlider: false //是否可以滑動，防止加載音樂時 用戶滑動進度條點擊播放按鈕觸發事件
說明：
•因頁面中音樂數量較多，所以只有當用戶點擊播放，再去加載audio文件。
•wx.getBackgroundAudioManager()對象，同一時間只會播放一個audio文件。當重新賦值src時，會切換文件。
•利用onTimeUpdate方法實時更新播放進度。
•onEnded方法處理audio播放完畢后的數據重新初始化事件。
•變量clickPlayAudioFunctionIsRuning用來防止用戶連續點擊按鈕。
const _this = this; const _data = _this.data; //防止用戶點擊播放按鈕太快 if (_data.clickPlayAudioFunctionIsRuning){ return ; } _this.setData({ clickPlayAudioFunctionIsRuning: true }) var _obj = _this.data.audioListObj; const audioId = $this.currentTarget.dataset.audioid; var backgroundAudioManager = wx.getBackgroundAudioManager(); if (_this.data.audioListObj[audioId].imgUrl == '../../images/play.png'){ console.log('轉換至播放狀態') //切換所有播放按鈕為暫停狀態 for (var j in _this.data.audioListObj) { if (j && _this.data.audioListObj[j]) { _this.data.audioListObj[j].imgUrl = '../../images/play.png'; } } _this.setData({ audioListObj: _this.data.audioListObj, }) //暫停正在播放音樂 wx.stopBackgroundAudio(); _obj[audioId].imgUrl = '../../images/paused.png'; backgroundAudioManager.title = '測試'; //設置音樂開始時間 if (_this.data.audioListObj[audioId].currentProcessNum != 0){ backgroundAudioManager.startTime = _this.data.audioListObj[audioId].currentProcessNum; } backgroundAudioManager.src = _this.data.audioListObj[audioId].src; _obj[audioId].canSlider = true; backgroundAudioManager.play(); // 背景音頻自然播放結束事件 backgroundAudioManager.onEnded(function () { var _obj = _this.data.audioListObj; _obj[audioId].imgUrl = '../../images/play.png'; _obj[audioId].currentProcess = 0; _obj[audioId].currentProcessNum = 0; _this.setData({ audioListObj: _obj }) }) //背景音頻播放進度更新事件 backgroundAudioManager.onTimeUpdate(function (callback) { _obj = _this.data.audioListObj; //設置總時長 if (_obj[audioId] && _obj[audioId].totalProcess && (_obj[audioId].totalProcess == '--:--' || _obj[audioId].totalProcess == '00:00')) { console.log(_this.formatTime(backgroundAudioManager.duration)) _obj[audioId].totalProcess = _this.formatTime(backgroundAudioManager.duration); _obj[audioId].totalProcessNum = backgroundAudioManager.duration; _this.setData({ audioListObj: _obj }) } if (!_this.data.isMovingSlider) { //更新進度 _obj[audioId].currentProcess = _this.formatTime(backgroundAudioManager.currentTime); _obj[audioId].currentProcessNum = backgroundAudioManager.currentTime; _this.setData({ audioListObj: _obj }) } }) } else if (_this.data.audioListObj[audioId].imgUrl == '../../images/paused.png'){ console.log('轉換至暫停狀態') _obj[audioId].imgUrl = '../../images/play.png' wx.pauseBackgroundAudio(); backgroundAudioManager.pause(); } _this.setData({ audioListObj: _obj, clickPlayAudioFunctionIsRuning: false })滑動進度條觸發事件
const _this = this; const _data = _this.data; const _obj = _this.data.audioListObj; const position = $this.detail.value; const audioId = $this.currentTarget.dataset.audioid; var backgroundAudioManager = app.globalData.bgAudioListManager; _obj[audioId].currentProcess = _this.formatTime(position); _obj[audioId].currentProcessNum = position; //如果正在播放 if (_obj[audioId].imgUrl == '../../images/paused.png'){ _obj[audioId].seek = position; if (_obj[audioId].seek != -1) { wx.seekBackgroundAudio({ position: Math.floor(position), }) _obj[audioId].seek = -1; } } _this.setData({ audioListObj: _obj })開始滑動觸發事件
this.setData({ isMovingSlider: true });結束滑動觸發事件
this.setData({ isMovingSlider: false });總結
以上所述是小編給大家介紹的微信小程序自定義音樂進度條的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持！
新聞熱點
疑難解答
