小程序模板網(wǎng)

控制音頻文件播放進(jìn)度

發(fā)布時(shí)間:2020-05-21 09:38 所屬欄目:小程序開發(fā)教程

問題描述

在微信小程序中經(jīng)常會(huì)用到控制文件播放的滑塊,通過滑塊可控制音頻播放進(jìn)度,下面即用代碼實(shí)現(xiàn)。

解決方案

首先用.wxml與.wmss代碼實(shí)現(xiàn)進(jìn)度條的效果,再通過.js文件控制進(jìn)度條的進(jìn)度和進(jìn)度條的時(shí)間顯示。

.wxml中(播放進(jìn)度結(jié)構(gòu)的代碼):

<view class="content-play-progress">

  <text>{{play.currentTime}}</text>

    <view>

      <slider activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}"/>

    </view>

  <text>{{play.duration}}</text>

</view>

在上述代碼中,第五行用到了slider組件,其值為播放進(jìn)度play.percent。

.wxss中(播放進(jìn)度樣式的代碼):

.content-play-progress{

  display: flex;

  align-items: center;

  margin: 0 35rpx;

  font-size: 9pt;

  text-align: center;

}

.content-play-progress>view{

  flex: 1;

}

保存上述代碼后,運(yùn)行程序,效果如圖:

圖 1 微信小程序進(jìn)度條的實(shí)現(xiàn)

.js中(控制進(jìn)度條的進(jìn)度和時(shí)間的代碼):

onReady: function(){

  this.audioCtx=wx.createInnerAudioContext()

  var that=this

//播放失敗檢測(cè)

this. audioCtx.onError(function(){

    console.log(‘播放失?。?rsquo;+that.audioCtx.src)

})

//播放完成自動(dòng)換下一曲

this. audioCtx.OnEnded(function(){

  that.next()

})

//自動(dòng)更新播放進(jìn)度

this. audioCtx.onPlay(function(){

this. audioCtx.onTimeUpdate(function(){

  that.setData({

‘play.duration’: formatTime(that.audioCtx.duration),

‘play.currrentTime’: formatTime(that.audioCtx. currrentTime),

‘play.percent’: that.audioCtx. currrentTime /

            that.audioCtx.duration*100

})

})

//默認(rèn)選擇第一曲

 This.setMusic(0)

  //格式化時(shí)間

function formatTime(time){

   var minute=Math.floor(time/60)%60;

var second=Math.floor(time)%60

return (minute<10?’0’+minute:minute)+’:’+

     (second<10?’0’+second:second)

}

})

}

上述代碼中,通過調(diào)用audioCtx的onTimeUpdate()的方法,獲取音視頻狀態(tài)信息,并通過formatTime()函數(shù)處理時(shí)間格式,最后渲染到頁面實(shí)現(xiàn)實(shí)時(shí)更新效果,效果如圖:

 

圖 2 微信小程序進(jìn)度條的滑動(dòng)

在slider組件上綁定bindchange事件,可以實(shí)現(xiàn)滑動(dòng)進(jìn)度條調(diào)節(jié)音視頻文件播放進(jìn)度,代碼示例:

<slider bindchange=”sliderChange” activeColor=”#d33a31” block-size=”12” backgroundColor=”#dadada” value=”{{play.percent}}”/ >

在.js文件中編寫sliderChange函數(shù)獲取用戶當(dāng)前選擇的進(jìn)度,將時(shí)間通過audioCtx對(duì)象的seek()方法進(jìn)行設(shè)置,代碼示例:

sliderChange: function(e){

  var second=e.detail.value* that.audioCtx.duration/100

that.audioCtx.seek(secend)

},



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25242.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢