微信小程序获取音频时长与实时获取播放进度问题


Posted in Javascript onAugust 28, 2018

首先在没有播放音频之前,居然拿不到总时长

但是在播放之后也需要设置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 相关文章推荐
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
vue表单自定义校验规则介绍
Aug 28 #Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 #Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 #Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 #Javascript
浅谈redux以及react-redux简单实现
Aug 28 #Javascript
Vue封装的可编辑表格插件方法
Aug 28 #Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 #Javascript
You might like
php生成文件
2007/01/15 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP培训要多少钱
2017/06/06 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
用python制作游戏外挂
2018/01/04 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
自我评价的范文
2014/02/02 职场文书
《燕子》教学反思
2014/02/18 职场文书
开学典礼决心书
2014/03/11 职场文书
自动一体化专业求职信
2014/03/15 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
学生会任命书范本
2015/09/21 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
python 如何用terminal输入参数
2021/05/25 Python
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python