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


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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
javascript如何定义对象数组
Jun 07 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 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
动易数据转成dedecms的php程序
2007/04/07 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
JQuery基础语法小结
2015/02/27 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
如何编写jquery插件
2017/03/29 jQuery
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
Python多进程同步简单实现代码
2016/04/27 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python批量处理文件或文件夹
2020/07/28 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python的pygame安装教程详解
2020/02/10 Python
Python实现SMTP邮件发送
2020/06/16 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
Structs界面控制层技术
2013/10/11 面试题
最新会计专业求职信范文
2014/01/28 职场文书
教师年终个人总结
2015/02/11 职场文书