详解小程序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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
DOM 高级编程
May 06 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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下获取http状态的实现代码
2014/05/09 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
php实现可逆加密的方法
2015/08/11 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
一句话JavaScript表单验证代码
2009/08/02 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
Python md5与sha1加密算法用法分析
2017/07/14 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
Python Selenium参数配置方法解析
2020/01/19 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
Java面试题及答案
2012/09/08 面试题
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
小学毕业感言300字
2014/02/19 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
二年级学生评语大全
2014/04/23 职场文书
政府信息公开实施方案
2014/05/09 职场文书
党校学习心得体会范文
2014/09/09 职场文书
寒假致家长的一封信
2015/10/10 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers