【微信小程序】解决InnerAudioContext.onTimeUpdate不执行的问题

问题描述

微信小程序在较新版本的音频接口中推荐使用InnerAudioContext对象实现音频的播放、暂停、跳转等功能,通过监听接口回调实现。

InnerAudioContext.onTimeUpdate(function callback)为监听播放进度更新的接口,在拖动进度条时或跳转播放后此回调不触发。

问题分析

经测试,在触发onWaiting回调后会导致onTimeUpdate失效,此问题的更多讨论:
微信开放社区

解决

只需要在onWaiting()触发时,调用pause(),在音频准备好的时候也就是onCanplay()触发时再调用play()即可。

目前在IDE和xiaomi9 Wechat-7.0.13上表现较好,iphone未测试。

  
// 音频由于网络等原因等待中的回调
this.audioCtx.onWaiting(() => {
  that.audioCtx.pause() // 等待网络的时候音频暂停
  that.setData({
      waitFlag: true // 标明是onWaiting触发的暂停
  })

})

// 音频准备就绪的回调
this.audioCtx.onCanplay(() => {
  if (that.data.waitFlag) { // 如果是onWaiting触发的暂停,就立即播放
      that.audioCtx.play() // play()方法看上去能重新触发onTimeUpdate()回调
      that.setData({
          waitFlag: false // 取消相应的flag标志位
      })
  }
})
  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值