最新微信小程序获取音频时长与实时获取播放进度

#微信小程序获取音频时长与实时获取播放进度
在小程序官方文档中
audio
注意:1.6.0 版本开始,该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口

##第一种方法 通过audio组件获取音频时长和实时播放进度

audio 有一个bindtimeupdate 属性
当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}

  <audio src="{{src}}" id="myAudio" bindtimeupdate='bindtimeupdate' controls name='{{name}}' author='{{author}}' poster="{{poster}}"></audio>

在JS 直接通过bindtimeupdate 方法获取就可以了

bindtimeupdate(res) {
    console.log('bindtimeupdate', parseInt(res.detail.currentTime), '时间总时长-->', parseInt(res.detail.duration));
    }

##第二种 通过wx.createInnerAudioContext 接口
通过这个接口

JS 通过获取实例 设置播放连接 然后我们通过点击播放按钮 获取实时进度

  this.innerAudioContext = wx.createInnerAudioContext()
   this.innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46';;
 audioPlay1(res) {
    	
    this.innerAudioContext.play();
    this.innerAudioContext.onTimeUpdate(() => {
      console.log('进度更新了总进度为:' + this.innerAudioContext.duration + '当前进度为:' +           this.innerAudioContext.currentTime);
    })



  }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值