详解小程序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 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 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
php SQL Injection with MySQL
2011/02/27 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
PHP对象相关知识总结
2017/04/09 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
使用Python生成url短链接的方法
2015/05/04 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
python爬取哈尔滨天气信息
2018/07/14 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
写给女朋友的道歉信
2014/01/12 职场文书
开展读书活动总结
2014/06/30 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers