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


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 相关文章推荐
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
深入学习JavaScript对象
Oct 13 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
详解vue-cli3多环境打包配置
Mar 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
php实现最简单的MVC框架实例教程
2014/09/08 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python requests获取网页常用方法解析
2020/02/20 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
护理自我鉴定范文
2013/10/06 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
合理化建议书
2015/02/04 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
大学同学聚会感言
2015/07/30 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery