详解小程序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表达式:URL 协议介绍
Mar 10 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
PHP测试程序运行时间的类
2012/02/05 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
中软Java笔试题
2012/11/11 面试题
幼儿园秋游活动方案
2014/01/21 职场文书
机关单位动员会主持词
2014/03/20 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
员工工作心得体会
2019/05/07 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
MySQL常见优化方案汇总
2022/01/18 MySQL