详解小程序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 offsetX与layerX区别
Mar 12 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
js闭包学习心得总结
Apr 17 Javascript
react 创建单例组件的方法
Apr 26 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
Oct 22 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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
第八节 访问方式 [8]
2006/10/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
document.getElementById介绍
2011/09/13 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
pandas数据集的端到端处理
2019/02/18 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
python 实现超级玛丽游戏
2020/11/25 Python
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
申报职称专业技术个人的自我评价
2013/12/12 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
实习生自我评价
2014/01/18 职场文书
勤俭节约倡议书
2014/04/14 职场文书
领导干部保密承诺书
2014/08/30 职场文书
团员个人总结
2015/02/26 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
解决vue中provide inject的响应式监听
2022/04/19 Vue.js