【微信小程序】解决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标志位
      })
  }
})