收藏
回答

InnerAudioContext.onTimeUpdate再次调用不触发

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug innerAudioContext.onTimeUpdate 客户端 7.0.4 2.7.3

- 当前 Bug 的表现(可附上截图)

InnerAudioContext播放完以后再次播放,onTimeUpdate生命周期不会再次触发,但是onPlay,onEnd都能正常触发


- 预期表现

每次audio组件重新播放都能触发onTimeUpdate

- 复现路径


- 提供一个最简复现 Demo


InnerAudioContext.onTimeUpdate再次调用不触发

最后一次编辑于  2019-07-04
回答关注问题邀请回答
收藏

15 个回答

  • 燚
    2019-07-03

    onTimeUpdate是播放进度更新,重新播放为什么不再触发?

    2019-07-03
    有用 1
    回复 19
    • 麦叻
      麦叻
      2019-07-04

      对 就是这个问题

      2019-07-04
      1
      回复
    • 燚
      2019-07-04回复麦叻

      这边没重现不触发的case,你的设备信息是?

      2019-07-04
      回复
    • 麦叻
      麦叻
      2019-07-04回复

      这段代码片段 你导入看看Console 第二次播放不是也没触发吗

      2019-07-04
      回复
    • DuDuDu
      DuDuDu
      2019-07-04

      我这边也有这样的问题,不触发,求官方关注!

      2019-07-04
      3
      回复
    • 我贼瘦
      我贼瘦
      2019-07-18
      音频低于5秒,第一次点击播放可触发,第二次就不会触发。且ios上正常
      2019-07-18
      3
      回复
    查看更多(14)
  • 朱文涛
    朱文涛
    2020-11-26

    总结得出以下结论:

    发生原因:由于音频加载导致 onUpdateTime 失效,(比如调用 seek的时候,触发了音频自动加载)

    总结:(受楼上启发)由于使用 innerAudioContext.paused(比如:打印) 可以将onUpdateTime生效,所以只需要判断在什么情况下使用innerAudioContext.paused,由于每次音频加载完毕都会触发onCanPlay,所以加在此回调中即可

    解决方案:innerAudioContext.onCanPlay(()=>{ console.log(innerAudioContext.paused) })

    其它:楼上说在seek后加setTimeout(() => { console.log(innerAudioContext.paused) },100),也可以解决,由于seek后音频加载时间不固定,100毫秒内如果没有加载完毕,仍然无法触发onUpdateTime,所以加在onCanPlay中更加准确。

    2020-11-26
    有用 9
    回复 5
    • --Meteora--
      --Meteora--
      2023-07-25
      好无语,官方的开发人员是不是觉得innerAudioContext只播放一个音频就不再调用了
      2023-07-25
      2
      回复
    • SymonHo
      SymonHo
      2023-09-07
      2023年
      2023-09-07
      回复
    • Jackson
      Jackson
      05-26
      我这还是不行😣
      05-26
      回复
    • Jackson
      Jackson
      05-26
      我这onCanplay没触发。。
      05-26
      回复
    • 小鑫不小心
      小鑫不小心
      10-12回复--Meteora--
      官方文档是一点不写innerAudioContext的每个函数的行为特性,常见功能的参考实践代码
      10-12
      回复
  • Pumpkin Head
    Pumpkin Head
    2020-01-10

    最近也碰到这个问题。发现如果不去读取innerAudioContext.paused这个变量,它不会主动更新。解决问题的思路就是在调用play()方法之后再主动读取一次paused变量。可以写一个settimeout函数。

    this.data.innerAudioContext.seek(0)
    this.data.innerAudioContext.play()
    setTimeout(() => {
      console.log(this.data.innerAudioContext.paused)
    }, 100)
    
    2020-01-10
    有用 16
    回复 19
    • Qiu
      Qiu
      2020-02-27
      这个方法试过是可以的,我设的间隔是500
      2020-02-27
      1
      回复
    • h.
      h.
      2020-05-24
      虽然不知道为什么 但是确实有用 为什么wx的bug每一个都能存在大半年
      2020-05-24
      2
      回复
    • 北渚
      北渚
      2020-07-21
      居然加setTimeout就莫名其妙可以了,不明觉厉
      2020-07-21
      回复
    • 龙一
      龙一
      2020-08-05
      我擦窗户,都一年了。 竟然有用。怎么试出来的我respect了
      2020-08-05
      回复
    • 三人
      三人
      2020-08-11
      厉害。一年了,这种方法可以。
      2020-08-11
      回复
    查看更多(14)
  • herock
    herock
    2022-03-26

    遇到同样的问题,目前已解决,分两部分详述:


    一、分析问题


    我的场景是用户录制语音完成后,自动播放一遍,用户可以点“重听”按钮再次播放。



    我使用 InnerAudioContext 来实现播放语音的需求,录制语音完成后的自动播放是将 InnerAudioContext.src 赋值为录制完成后得到的 tempFilePath,并设置自动播放(InnerAudioContext.autoplay = true),可以正常播放,且 onTimeUpdate 回调正常。


    第一遍播放完毕后,点击“重听”按钮时,我使用 InnerAudioContext.play(),倒是可以正常播放,但 onTimeUpdate 100%不会被触发(我需要用 onTimeUpdate 来更新进度条)。


    发现这个问题下很多人已经指出,只要触发了 innerAudioContext.onWaiting,innerAudioContext.onTimeUpdate 就会失效,我实测了一下,果然如此:运行 InnerAudioContext.play() 后,就会触发 onWaiting,因为需要重新载入音频文件,所以一定会触发等待载入(实测即使只有 1 秒钟的音频,用 .play() 播放时也会先触发 onWaiting)。


    而只要触发了 onWaiting 之后,onTimeUpdate 就失效了。但在这之后如果暂停一次再继续播放,onTimeUpdate 就能恢复正常。(微信团队真是懒政至极,这种 Bug 存在三年了,既不修复也不回复,真的好意思每个月继续领工资吗?😠)


    二、解决问题


    有人给的方案是用 setTimeout,原理就是运行 .play() 之后,等待一段时间让音频载入,然后运行一次暂停,然后再继续播放,就可使得 onTimeUpdate 正常运行。


    但延时这个方案太丑陋了,长了影响体验,短了音频没载入完依然无效,永远不可能设置一个完美的延时长度。


    对我这个场景而言(不需要拖动进度条),更理想的方式是点“重听”时,重新给 InnerAudioContext.src 赋值,并设置 InnerAudioContext.autoplay = true,它会等待音频载入完之后自动开始播放,不触发 innerAudioContext.onWaiting,所以 onTimeUpdate 也就能正常运行。


    而如果你的场景需要支持用户手动调整进度(需要调用 innerAudioContext.seek),也别用延时的方案,在 innerAudioContext.onCanplay 里(代表这时已经载入完音频了),调用一次 .pause(),再调用一次 .play() 即可。

    2022-03-26
    有用 4
    回复 3
    • 王『小』贱*#
      王『小』贱*#
      2023-04-11
      感谢老哥的分享
      2023-04-11
      回复
    • sd
      sd
      01-18
      专门登录上来给老哥点赞
      01-18
      回复
    • Jackson
      Jackson
      05-26
      我这还是不行😣
      05-26
      回复
  • Vaskka
    Vaskka
    2020-04-05

    完美解决onTimeUpdate在触发onWaiting回调后失效的问题:

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

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

      
    // 音频由于网络等原因等待中的回调
    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标志位
          })
      }
    })
    
    2020-04-05
    有用 3
    回复 3
    • 所谓曾经,已面目全非。所谓未来,不过冠冕堂�
      所谓曾经,已面目全非。所谓未来,不过冠冕堂�
      2020-05-07
      亲测有用,但是要定制化音频播放,不止这一个坑,真的是服气
      2020-05-07
      回复
    • 觀·自在
      觀·自在
      2020-08-18
      ios不管用
      2020-08-18
      回复
    • 觀·自在
      觀·自在
      2020-08-18
      楼主的方法,ios 确实不能播放了!参考后的解决方法是把pauses稍微挪一下
      2020-08-18
      1
      回复
  • zuo
    zuo
    2019-08-15

    在onEnded里面写 innerAudioContext.seek(0)即可解决


    2019-08-15
    有用 3
    回复 9
    • Andrew
      Andrew
      2019-09-05
      并不能解决,真机上还是获取不到
      2019-09-05
      回复
    • 杨森
      杨森
      2019-09-05回复Andrew
      对的,并不能解决
      2019-09-05
      回复
    • Andrew
      Andrew
      2019-09-05回复杨森
      现在有啥解决办法吗
      2019-09-05
      回复
    • 杨森
      杨森
      2019-09-05回复Andrew
      还没有,而且现在我还有一个问题是,onTimeUpdate还没有监听完,onEnded就触发了
      2019-09-05
      回复
    • 杨森
      杨森
      2019-09-06回复Andrew
      你解决了吗?
      2019-09-06
      回复
    查看更多(4)
  • uh...
    uh...
    2019-11-26

    我也遇到同样的问题 真心觉得小程序做的贼垃圾

    2019-11-26
    有用 2
    回复 1
    • 小精灵òᆺó
      小精灵òᆺó
      2019-12-11
      我也 遇到了同样的问题,请问最后是怎么解决的?
      2019-12-11
      回复
  • 简单.Simple🐼
    简单.Simple🐼
    06-19

    加个seek(0) 貌似可以触发再次onTimeUpdate

    06-19
    有用
    回复
  • 最後的輕語
    最後的輕語
    2023-10-26

    2023-10-26 依旧没有解决这个bug 微信真好

    2023-10-26
    有用
    回复
  • AutumnVibe
    AutumnVibe
    2022-11-16
    setInterval(()=>{
    	let duration = innerAudioContext.duration
    	let currentTime = innerAudioContext.currentTime
    	console.log("时长: ", duration)
    	console.log("当前播放时间: ", currentTime)
    }, 200)
    


    用定时器吧,实测可行

    2022-11-16
    有用
    回复

正在加载...

登录 后发表内容