详解小程序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 相关文章推荐
js Html结构转字符串形式显示代码
Nov 15 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
原生javascript实现分页效果
2017/04/21 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Python Socket传输文件示例
2017/01/16 Python
Python中函数参数调用方式分析
2018/08/09 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
解析Python的缩进规则的使用
2019/01/16 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python绘制玫瑰的实现代码
2020/03/02 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
python中random模块详解
2021/03/01 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
开办大学饮食联盟创业计划书
2014/01/29 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
导游词之无锡唐城
2019/12/12 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
nginx之queue的具体使用
2022/06/28 Servers