innerAudioContext.onTimeUpdate 不触发的解决方案

使用定时器监控音频播放
原创 已于 2022-05-27 18:24:39 修改 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

于 2022-05-27 13:54:25 首次发布
本文介绍了如何利用JavaScript定时器来监控音频播放进度，通过设置定时任务每秒记录当前音频播放的时间，确保即使在播放等待等异常情况下也能准确获取播放状态。

一、定时器

setTimeout( () => {
   
   
      innerAudioContext.onTimeUpdate(() => {
   
   
        console.log(innerAudioContext.currentTime)
    }, 1000
最低0.47元/天 解锁文章
微信小程序 - 音频播放进度条和点击拖动的控制，支持自定义音乐播放控件样式布局（wx.createAudioContext）解决各种 InnerAudioContext.onTimeUpdate不执行
🏆 前端领域优质创作者
10-27 3714
微信小程序播放音频怎么显示出进度条，音乐播放器组件，wx.createAudioContext配合slider显示播放进度条，用wx.createInnerAudioContext怎么写进度条？onTimeUpdate怎么做音乐进度条，完美解决微信小程序InnerAudioContext.onTimeUpdate失效问题，解决InnerAudioContext.onTimeUpdate不执行的问题，seek()方法执行后不走，InnerAudioContext.onTimeUpdate不触发小程序
微信小程序innerAudioContext设置autoplay为true后，切换src时播放器状态的变化
sinat_38683889的博客
11-15 5491
微信小程序innerAudioContext设置autoplay为true后，切换src时播放器状态的变化 innerAudioContext是微信小程序自带的页面内播放器，可以通过 wx.createInnerAudioContext 接口获取实例。innerAudioContext 的用法如下： 首先获取播放器实例 const innerAudioContext = wx.createInne...
【微信小程序】解决InnerAudioContext.onTimeUpdate不执行的问题
Vaskka的博客
04-05 6539
问题描述 微信小程序在较新版本的音频接口中推荐使用InnerAudioContext对象实现音频的播放、暂停、跳转等功能，通过监听接口回调实现。 InnerAudioContext.onTimeUpdate(function callback)为监听播放进度更新的接口，在拖动进度条时或跳转播放后此回调不触发。 问题分析 经测试，在触发onWaiting回调后会导致onTimeUpdate失效，此问...
InnerAudioContext.onTimeUpdate不触发
little_kid_pea的博客
01-02 5304
官方文档和论坛都没有写这个问题的解决办法，最后经过实验发现，需要在InnerAudioContext.onTimeUpdate调用以前，先调用innerAudioContext.onPlay，并且在innerAudioContext.onPlay的回调函数中访问innerAudioContext.duration属性 Page({ /** * 页面的初始数据 */ ...
微信小程序音频播放问题createInnerAudioContext为何不调用onTimeUpdate
shi450561200的博客
07-12 1823
console.log('开始播放')
微信小程序InnerAudioContext.onTimeUpdate 失效问题
akko
01-06 5126
在使用小程序做音乐播放器控制时需要获取当前音频的总时长跟当前时长做进度显示，所以用到了 wx.createInnerAudioContext(Object object) 这个类底下的 onTimeUpdate(function callback) 方法 但是在实际使用中，当加载音频并且播放的时候这个方法却没有调用 initAudio() { this.audio = wx.createInnerAudioContext() this.aud
uni.createInnerAudioContext() innerAudioContext.seek(0)失效
06-24
解决方案建议：1.确保在音频可以播放（即`onCanplay`事件触发）后再调用`seek`方法。2.尝试在播放状态下调用`seek`（可以先播放，然后立即暂停并跳转，或者直接跳转）。3.检查API文档，看是否有其他注意事项。参考...
uni.createInnerAudioContext() 真机andriod调试 innerAudioContext.seek(10)失效
06-24
结合之前回答中关于seek(0)失效的解决方案，我们针对Android真机调试环境进行以下调整：###核心问题分析在Android真机上，`innerAudioContext.seek(0)`失效的可能原因：-**音频未正确加载**：音频源可能未加载完成，...
innerAudioContext.onCanplay 安卓手机中没回调
最新发布
06-26
可能的原因和解决方案：1.**网络问题或音频文件加载失败**：如果音频文件加载缓慢或失败，可能导致onCanplay事件无法触发。可以尝试监听onError事件来捕获错误信息。2.**音频格式兼容性问题**：安卓设备支持的音频...
uniapp contextInit() { let innerAudioContext = uni.createInnerAudioContext();} 组件封装 局部声明 seek方法在Android真机调试失效的解决方案
06-24
###解决方案步骤1.**全局实例化**确保音频实例在全局作用域中创建，避免局部作用域导致的操作失效[^1]：```javascript//在页面或组件的顶部声明constaudioContext=uni.createInnerAudioContext();```2.**关闭静音...
InnerAudioContext.onTimeUpdate再次调用不触发 解决办法(玄学)
weixin_44828588的博客
05-02 754
最近碰到这个问题。发现如果不去读取innerAudioContext.paused这个变量，它不会主动更新。解决问题的思路就是在调用play()方法之后再主动读取一次paused变量。可以写一个settimeout函数。 效果真的很神奇: ...
uniapp innerAudioContext对象onUpdateTime无法调用
一名假人的博客
08-02 1509
uniapp innerAudioContext对象onUpdateTime无法及时调用 1. 问题描述 近期在写微信小程序的音频播放组件，由于原生的<audio>组件,被微信标为过时，需要自绘UI组件。在获取当时播放进度遇到了问题。 audio.onUpdateTime(),无法在音频播放的时候就调用 <srcipt> export default{ created(){ const audio = uni.innerAudioContext.creat() au
解决 uni-app 中 onTimeUpdate 方法无法在自动播放的时候不生效问题
jared.wang
07-06 2354
解决uni-app 使用audio自动播放 无法正确监听进度问题
小程序-InnerAudioContext.onTimeUpdate失效
weixin_39558942的博客
08-22 2571
小程序-InnerAudioContext.onTimeUpdate失效 问题： const innerAudioContext = wx.createInnerAudioContext() ... innerAudioContext.onTimeUpdate(() => { console.log('开始播放') } 调用InnerAudioContext.onTimeUpd...
taro vue video组件onTimeUpdate等事件不触发
博客简介
01-18 1575
尝试修改事件名称，去掉on，转小写： @timeupdate='onTimeUpdate'
uniapp h5中 ios无法触发onCanplay事件
mini_1251861209的博客
12-10 1617
h5页面，我用onCanplay来监听音频是否加载完成,加载完成就给时长赋值，同时去掉播放按钮的旋转加载动画，发现ios端根本就没有打印 this.audio.onCanplay(()=>{ console.log('加载完毕',this.audio) this.duration = this.audio.duration this.loading = false; }) ...
uni.createInnerAudioContext`在ios手机无法自动播放,可通过`jweixin-module`来解决
曲小强
06-30 1137
uni.createInnerAudioContext`在ios手机无法自动播放,可通过`jweixin-module`来解决
小程序[InnerAudioContext]不报错、 不播放BUG要如何解决？
weixin_34396902的博客
04-28 3863
问题环境 全局生成了一个innerAudioContext实例，每次赋值src然后play() 问题描述 有时候音频播放无声音 解决思路 排错 注册监听方法，查看哪里出错 innerAudioContext.onCanplay(() => { console.log('can play') }) innerAudioContext.onPlay(() => { console....
uni-app 音频播放onCanplay中获取音频长度duration一直为0或undefined
也简的博客
07-04 4079
uni-app 音频播放onCanplay中获取音频长度duration一直为0
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值