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


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 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
语义化 H1 标签
Jan 14 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
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
Laravel多域名下字段验证的方法
2019/04/04 PHP
php实例化一个类的具体方法
2019/09/19 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
使用console进行性能测试
2015/04/27 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python中模块查找的原理与方法详解
2017/08/11 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
迟到检讨书800字
2014/01/13 职场文书
中年人生感言
2014/02/04 职场文书
煤矿安全生产标语
2014/06/06 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
故宫英文导游词
2015/01/31 职场文书
教师个人学习总结
2015/02/11 职场文书
会计工作检讨书
2015/02/19 职场文书
员工辞职信怎么写
2015/02/27 职场文书
行政申诉状范文
2015/05/20 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python