详解小程序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 相关文章推荐
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
jQuery拖拽 & 弹出层 介绍与示例
Dec 27 Javascript
javascript操作数组详解
Dec 17 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
jquery.validate使用详解
Jun 02 Javascript
JavaScript 是什么意思
Sep 22 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
原生js简单实现放大镜特效
May 16 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 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
深入理解PHP JSON数组与对象
2016/07/19 PHP
php微信支付接口开发程序
2016/08/02 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
js实现计算器功能
2020/08/10 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
python类装饰器用法实例
2015/06/04 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python写日志文件操作类与应用示例
2019/07/01 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
Python实现微信好友的数据分析
2019/12/16 Python
Python如何实现定时器功能
2020/05/28 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
安全生产先进个人材料
2014/02/06 职场文书
保护环境的建议书
2014/03/12 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
论文答谢词
2015/01/20 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书