详解小程序BackgroundAudioManager踩坑之旅


Posted in Javascript onDecember 08, 2019

由于贵公司业务发展需要,切图仔开始写起了小程序啦(兴奋地搓小手手)

贵公司是知识付费平台,需要音频播放课程,同时希望用户在退出小程序后依然可以听课。在这种情况下,小程序的API——BackgroundAudioManager就派得上用场啦。

在看完官方文档,信心满满地写完提测后,测试小姐姐找出的bug比我的工资还多!!(???)因此有了本篇文章。

本篇涉及到的几个坑(以下BAM为BackgroundAudioManager的缩写)

  • 一个误区
  • BAM.onStop() 与 BAM.onEnded() 的坑
  • BAM.seek() 与 BAM.onSeeked() 的坑
  • BAM.onTimeUpdate() 的坑
  • 在音频页退出小程序暂停音频后返回小程序的坑

一个误区

  • BAM.onCanplay()是监听背景音频进入可播放状态事件,并不代表在该事件中,音频就为播放状态。

BAM.onStop() 与 BAM.onEnded() 的坑

在BAM.onStop() 与 BAM.onEnded()的回调事件中,audio.src为空

BAM.onStop(): 当再次播放音频时,将data数据中音频的src赋值给BAM,然后在onTimeUpdate()事件内跳转到上次暂停的时间点(记得本地缓存音频播放时间哦~)

BAM.onEnded():在BAM.onEnded()回调函数中,将data数据中音频的src赋值给BAM,然后在onTimeUpdate()事件内暂停音频

BAM.seek() 与 BAM.onSeeked() 的坑

  • 设置src后立即seek()失效

seek操作最好放在BAM.onTimeUpdate事件中。 类似HTML的Audio元素的ontimeupdate方法,建议将currentTime的改变都在该方法中进行。

  • 暂停状态下跳转到指定位置,在onSeeked()回调中,Android的currentTime是跳转前的时间,而IOS是跳转后的时间

虽然在onSeeked()回调函数中,Android获取currentTime为跳转前的时间,但若开始播放,还是从指定位置开始播放。所以若有暂停连续跳转并需要获取currentTime的需求,可在onSeeked()回调函数中判断若为Android并且为暂停状态时播放。

  • 开发者工具不走onSeeked()回调

如果在onSeeked()回调里面有特殊操作,记得区分是否是开发者工具~

BAM.onTimeUpdate() 的坑

在退出小程序后,Android与IOS均不走onTimeUpdate()事件

因此若在onTimeUpdate()事件内实时缓存音频的播放时长会导致在退出小程序暂停后返回拿到的音频缓存时间是退出前的时间。可以在onPause()与onEnded()事件中记录暂停时的音频播放时长。(在onTimeUpdate()事件内所做的操作可根据实际情况考虑节流哦~)

在音频页退出小程序暂停音频后返回小程序的坑

IOS:BAM.src为空

Android:BAM.src不为空,但play()失败

这点与第二点的处理方式相同。当在音频页退出小程序暂停音频后返回,进入onShow()事件时,将data数据中音频的src赋值给BAM,然后在onTimeUpdate()事件内跳转到上次暂停的时间点

原本以为可以写的会有很多,最后写下来也就几个点,表达的不也是很清晰,就当学习日记吧

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 #Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 #Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 #Javascript
JQuery样式与属性设置方法分析
Dec 07 #jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
json解析大全 双引号、键值对不在一起的情况
Dec 06 #Javascript
js实现图片粘贴到网页
Dec 06 #Javascript
You might like
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
JavaScript中0和""比较引发的问题
2016/05/26 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python获取array中指定元素的示例
2019/11/26 Python
Python super()函数使用及多重继承
2020/05/06 Python
如何使用python写截屏小工具
2020/09/29 Python
Vrbo英国:预订度假屋
2020/08/19 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
公司JAVA开发面试题
2015/04/02 面试题
关于工资低的辞职信
2014/01/14 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
详解Laravel制作API接口
2021/05/31 PHP
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python