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