這篇文章主要介紹了微信小程序中如何自定義一個(gè)音樂(lè)進(jìn)度條的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇微信小程序中如何自定義一個(gè)音樂(lè)進(jìn)度條文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

專(zhuān)注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)館陶免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

需求：顯示音樂(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
 });

關(guān)于“微信小程序中如何自定義一個(gè)音樂(lè)進(jìn)度條”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“微信小程序中如何自定義一個(gè)音樂(lè)進(jìn)度條”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：微信小程序中如何自定義一個(gè)音樂(lè)進(jìn)度條-創(chuàng)新互聯(lián)
當(dāng)前URL：http://chinadenli.net/article12/eodgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、用戶體驗(yàn)、App開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)