uni-app 在watch中使用uni.createInnerAudioContext实例的play方法时 无法触发onTimeUpdate事件

详细问题描述

使用uni-app开发小程序时，在watch中使用uni.createInnerAudioContext实例的play方法时，无法触发onTimeUpdate事件。

重现步骤

步骤

  • 首先我在onLoad中创建this.audioContext = uni.createInnerAudioContext()，然后监听this.audioContext.onTimeUpdate事件。
  • 点击歌曲时，commit vuex中的函数修改state中的属性
  • 在watch中监听这个属性，发生改变时使用uni.createInnerAudioContext实例的play方法，歌曲也能够播放声音
  • 我以为是监听vuex的属性不能被触发，然后尝试监听vue实例的属性时，也是不能被触发
  • onTimeUpdate没有在控制台输出内容，也就是没触发

期望

onTimeUpdate应该触发

Image from dcloud

IDE运行环境说明

环境 版本号
HBuilderX 1.7.0.20190314
windows win 10

uni-app运行环境说明

运行端 版本号
微信开发者工具 1.02.1902010

最后说一下，官方文档里说uni.createInnerAudioContext.paused true代表暂停 false代表播放 使用play方法后，不是应该获取的false么，我在控制台得到的true


更多关于uni-app 在watch中使用uni.createInnerAudioContext实例的play方法时 无法触发onTimeUpdate事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

17 回复

补充代码图片

更多关于uni-app 在watch中使用uni.createInnerAudioContext实例的play方法时 无法触发onTimeUpdate事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


后续！
真机调试的时候，onTimeUpdate可以正常触发。
在微信开发者工具 调试的时候 不能触发

微信开发者工具可能存在一些问题，请以真机为准。

调用seek后onTimeUpdate也失效了，h5正常，app无法触发，bug

楼主咋写的哇 我onLoad onReady onTimeUpdate都没触发

你的问题应该和楼主不同，仔细核对一下。

回复 DCloud_UNI_GSQ: app和小程序依然不执行onTimeUpdate函数，望修复bug

回复 9***@qq.com: app是用的vue还是nvue页面？另外小程序的问题需要反馈到小程序开发社区才能修复

duration Number 当前音频的长度（单位：s），只有在当前有合法的 src 时返回
这个也无法使用

经排查H5端在未获取到信息之前返回NaN与浏览器行为一致，暂不特殊处理

回复 DCloud_UNI_GSQ: 谢谢！

在H5端获取为NaN，app可以获取到时长

收到，将会排查

回复 DCloud_UNI_GSQ: 遍历多个音频文件的情况下，app在第一个文件获取时长为0，第二个开始，正常可获取

回复 握瑾怀瑜: 在onCanplay或者 onTimeUpdate获取

回复 龙雨溪: 谢谢！

这是一个典型的音频上下文状态管理问题。根据你的描述，主要问题出在watch中调用play方法时onTimeUpdate事件没有被触发。

原因分析：

  1. 在watch中直接调用play方法可能导致音频上下文状态异常
  2. 小程序环境下，watch中直接操作音频API可能存在执行时机问题

解决方案：

  1. 不要在watch中直接调用play方法，改为在methods中定义播放函数
  2. 确保在play之前先设置src属性
  3. 检查音频上下文是否被正确初始化

关于paused属性问题： 这是微信小程序的已知行为差异，play()方法调用后paused不会立即变为false，需要等待音频真正开始播放才会变化。建议使用onPlay事件来监听播放状态变化。

示例修正代码：

methods: {
  playAudio(src) {
    this.audioContext.src = src
    this.audioContext.play()
  }
}
回到顶部