微信小程序自定義音樂進(jìn)度條的實例代碼
需求:顯示音樂播放按鈕、可手動拖拽進(jìn)度條;頁面中含多個音樂,播放當(dāng)前音樂時暫停其他音樂播放。
小程序自帶標(biāo)簽 audio
小程序自帶的audio標(biāo)簽含固定的樣式,且有最小尺寸。目前項目也不含name和author字段,所以放棄audio標(biāo)簽。
實現(xiàn)效果圖
初始化音樂數(shù)據(jù)
<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 播放按鈕觸發(fā)事件 --> src: _this.data.questionObj.audio, currentProcess: '--:--',//顯示 將currentProcessNum處理成時間形式展示 currentProcessNum: 0,//賦值 totalProcess: '--:--', totalProcessNum: 1, seek: -1, imgUrl: '../../images/play.png', canSlider: false //是否可以滑動,防止加載音樂時 用戶滑動進(jìn)度條
點擊播放按鈕觸發(fā)事件
說明:
•因頁面中音樂數(shù)量較多,所以只有當(dāng)用戶點擊播放,再去加載audio文件。
•wx.getBackgroundAudioManager()對象,同一時間只會播放一個audio文件。當(dāng)重新賦值src時,會切換文件。
•利用onTimeUpdate方法實時更新播放進(jìn)度。
•onEnded方法處理audio播放完畢后的數(shù)據(jù)重新初始化事件。
•變量clickPlayAudioFunctionIsRuning用來防止用戶連續(xù)點擊按鈕。
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('轉(zhuǎn)換至播放狀態(tài)') //切換所有播放按鈕為暫停狀態(tài) 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 = '測試'; //設(shè)置音樂開始時間 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(); // 背景音頻自然播放結(jié)束事件 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 }) }) //背景音頻播放進(jìn)度更新事件 backgroundAudioManager.onTimeUpdate(function (callback) { _obj = _this.data.audioListObj; //設(shè)置總時長 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) { //更新進(jìn)度 _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('轉(zhuǎn)換至?xí)和顟B(tài)') _obj[audioId].imgUrl = '../../images/play.png' wx.pauseBackgroundAudio(); backgroundAudioManager.pause(); } _this.setData({ audioListObj: _obj, clickPlayAudioFunctionIsRuning: false })
滑動進(jìn)度條觸發(fā)事件
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 })
開始滑動觸發(fā)事件
this.setData({ isMovingSlider: true });
結(jié)束滑動觸發(fā)事件
this.setData({ isMovingSlider: false });
總結(jié)
以上所述是小編給大家介紹的微信小程序自定義音樂進(jìn)度條的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript實現(xiàn)列出數(shù)組中最長的連續(xù)數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)列出數(shù)組中最長的連續(xù)數(shù)的方法及使用,需要的朋友可以參考下2014-12-12javascript中alert()與console.log()的區(qū)別
我們在做js調(diào)試的時候使用 alert 可以顯示信息,調(diào)試程序,alert 彈出窗口會中斷程序, 如果要在循環(huán)中顯示信息,手點擊關(guān)閉窗口都累死。而且 alert 顯示對象永遠(yuǎn)顯示為[object ]。 自己寫的 log 雖然可以顯示一些 object 信息,但很多功能支持都沒有 console 好2015-08-08客戶端 使用XML DOM加載json數(shù)據(jù)的方法
我們?nèi)〕鰯?shù)據(jù)后可以以json的形式傳到前端處理,也可以以Xml Dom的形式傳到前端進(jìn)行處理。下邊例子是利用Jquery處理XML Dom的例子。2010-09-09node.js Web應(yīng)用框架Express入門指南
這篇文章主要介紹了node.js Web應(yīng)用框架Express入門指南,從安裝到各種技術(shù)的應(yīng)用,都進(jìn)行了講解,是一篇不錯的Express入門教程,需要的朋友可以參考下2014-05-05