微信小程序获取音频时长与实时获取播放进度问题
更新时间：2018年08月28日 11:03:58 作者：梦幻般的菜鸟
这篇文章主要介绍了微信小程序获取音频时长与实时获取播放进度,文中给大家通过一个例子介绍了微信小程序音频长度获取的问题，感兴趣的朋友跟随脚本之家小编一起看看吧
首先在没有播放音频之前，居然拿不到总时长
但是在播放之后也需要设置setTimeout来获取
所以在监听音频播放进度更新事件中获取。顺便获取当前播放进度
按照官方的写法
audioPlayed: function () {
myAudio.play()
setTieout(() => {
myAudio.onTimeUpdate(() => {
console.log(myAudio.duration) //总时长
console.log(myAudio.currentTime) //当前播放进度
})
}, 500)
}
但是这两个console都没有触发，很是神奇
增加延迟的时间也没有用
打断点都没有进去
但是！
audioPlayed: function () {
myAudio.play()
setTieout(() => {
myAudio.currentTime
myAudio.onTimeUpdate(() => {
console.log(myAudio.duration) //总时长
console.log(myAudio.currentTime) //当前播放进度
})
}, 500)
}
在里面写了一个
myAudio.currentTime 或者 myAudio.duration
断点就进去了，console也出来了
由于过于神奇，所以记录一下
下面看下微信小程序音频长度获取的问题
小程序推荐使用wx.createInnerAudioContext()创建的innerAudioContext，我们也通过这个接口创建音频。
音频的长度可以通过属性获取：
但是，给innerAudioContext赋值src后就能获取吗，请看下面的例子：
onLoad: function () {
bgM = wx.createInnerAudioContext();
bgM.src = 'https://upyun.lesson.bbwansha.com/dub/user/2.mp3';
console.log(bgM.duration);//0
bgM.onCanplay(()=>{
console.log(bgM.duration)//0
})
bgM.play();
bgM.onPlay(()=>{
console.log(bgM.duration)//0
})
setTimeout(()=>{
console.log(bgM.duration)//2.795102
},1000)
},
赋值结束后不能获取能够理解，在onCanplay，onPlay没法获取有点难以理解。
还好，我们通过setTimeout可以获取到。
获取到之后，还有个问题，在开发工具里，音频播放完之后，duration不变。
偶尔出现的问题：但在真机上，duration变为0了，也就是第二遍播放的时候，获取不到duration了。这个可以声明个个变量解决。
总结
以上所述是小编给大家介绍的微信小程序获取音频时长与实时获取播放进度问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
JavaScript进阶教程之函数的定义、调用及this指向问题详解
这篇文章主要给大家介绍了关于JavaScript进阶教程之函数的定义、调用及this指向问题的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下2022-09-09
关于恒等于（===）和非恒等于（!==）...2007-08-08
这篇文章主要介绍了ES6 Promise对象概念及用法,结合实例形式详细分析了ES6中Promise对象的概念、原理、创建、使用方法及相关操作注意事项,需要的朋友可以参考下2019-10-10
实例详解JavaScript中setTimeout函数的执行顺序
关于javascript的运行机制大家都应该有所了解了吧，其实javascript是一个单线程的机制，但是因为队列的关系它的表现会让我们感觉是一个多线程的错觉。下面这篇文章通过实例主要给大家介绍了关于JavaScript中setTimeout函数执行顺序的相关资料，需要的朋友可以参考下。2017-07-07
这篇文章主要介绍了如何解决日期函数new Date()浏览器兼容性问题,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了JS写滑稽笑脸运动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了JavaScript节点及列表操作的方法,以实例的形式较为详细的总结了javascript针对节点操作的相关技巧,并给出了一个完整的节点操作方法实例总结,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了自定义javascript验证框架,结合实例形式分析了javascript正则验证相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2019-05-05
JavaScript中的垃圾回收机制负责自动管理内存，回收不再使用的对象所占用的内存空间。本文主要介绍了JS中垃圾回收机制的相关知识，需要的可以参考一下2023-04-04
js函数中有三个在特定场合很好用的函数:reduce(),map(),filter()。而数组经常用到的方法有push、join、indexOf、slice等等，但是有一个经常被我们忽略的方法：reduce，这个方法简直强大的不要不要的。下面通过这篇文章来一起学习学习吧。2016-12-12
最新评论