详解小程序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 相关文章推荐
jQuery中:selected选择器用法实例
Jan 04 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
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
生成缩略图
2006/10/09 PHP
做个自己站内搜索引擎
2006/10/09 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
简单实现Python爬取网络图片
2018/04/01 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
微信公众号token验证失败解决方案
2019/07/22 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
css 元素选择器的简单实例
2016/05/23 HTML / CSS
医药代表个人求职信范本
2013/12/19 职场文书
旷课检讨书2000字
2014/01/14 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
文艺演出策划方案
2014/06/07 职场文书
毕业论文致谢信
2015/05/14 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js