微信小程序 innerAudioContext.onTimeUpdate不触发

【也不知道为什么，发出来的代码就被折叠了，大家复制出来放到代码编辑器里看吧。】

最近在开发一个小功能，需要播放音频，音频需要循环播放，代码如下：

onReady() {
    const audio = wx.createInnerAudioContext()
    audio.src = 'http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3'
    audio.loop = true audio.onPlay(() => {
        console.log('audio play start')
    }) audio.onTimeUpdate(() => {
        console.log('audio info', audio.duration, audio.currentTime)
    }) audio.play()
},

上面这段代码执行之后，onTimeUpdate里的log没有输出到控制台上。

查询之后发现，在官方社区里，有许多关于onTimeUpdate的问题。

由于音频加载导致 onUpdateTime 失效

由此，小改动一下代码, 将play放到onCanPlay事件里去执行，就可以了。、

audio.onCanPlay(()=>{
    audio.play()
})

经过改动以后，我们会发现在第一轮播放完毕之后，onTimeUpdate之后就不再执行了。

原因分析，第二轮播放onTimeUpdate出现问题应该和之前分析的类似。第二次播放在JS引擎里也需要一个准备时间，但在loop模式下，第二轮的准备时间没准备好，就触发了音频播放，导致onTimeUpdate没能成功触发。

解决第二轮播放，执行onTimeUpdate的方式为：

1. loop 改为false

2. 添加onEnded事件监听，在onEnded事件， 先将播放进度设置回0， 再执行一下播放代码。通过再次播放，实现视频循环播放的功能。

最终调整后的代码如下：

{
    onReady() {
            const audio = wx.createInnerAudioContext() audio.src = 'http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3'
            audio.loop = true audio.onPlay(() => {
                console.log('audio play start')
            }) audio.onTimeUpdate(() => {
                console.log('audio info', audio.duration, audio.currentTime)
            }) audio.onEnded(() => {
                audio.seek(0) audio.onCanplay(() => {
                    audio.play()
                })
            }) this.audio = audio
        },
        playaudio() {
            this.audio.play()
        },
}