小程序模板网

控制音频文件播放进度

发布时间:2020-05-21 09:38 所属栏目:小程序开发教程

问题描述

在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现。

解决方案

首先用.wxml与.wmss代码实现进度条的效果,再通过.js文件控制进度条的进度和进度条的时间显示。

.wxml中(播放进度结构的代码):

<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组件,其值为播放进度play.percent。

.wxss中(播放进度样式的代码):

.content-play-progress{

  display: flex;

  align-items: center;

  margin: 0 35rpx;

  font-size: 9pt;

  text-align: center;

}

.content-play-progress>view{

  flex: 1;

}

保存上述代码后,运行程序,效果如图:

图 1 微信小程序进度条的实现

.js中(控制进度条的进度和时间的代码):

onReady: function(){

  this.audioCtx=wx.createInnerAudioContext()

  var that=this

//播放失败检测

this. audioCtx.onError(function(){

    console.log(‘播放失败:’+that.audioCtx.src)

})

//播放完成自动换下一曲

this. audioCtx.OnEnded(function(){

  that.next()

})

//自动更新播放进度

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

})

})

//默认选择第一曲

 This.setMusic(0)

  //格式化时间

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)

}

})

}

上述代码中,通过调用audioCtx的onTimeUpdate()的方法,获取音视频状态信息,并通过formatTime()函数处理时间格式,最后渲染到页面实现实时更新效果,效果如图:

 

图 2 微信小程序进度条的滑动

在slider组件上绑定bindchange事件,可以实现滑动进度条调节音视频文件播放进度,代码示例:

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

在.js文件中编写sliderChange函数获取用户当前选择的进度,将时间通过audioCtx对象的seek()方法进行设置,代码示例:

sliderChange: function(e){

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

that.audioCtx.seek(secend)

},



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/25242.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询