详解小程序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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
浅析node.js的模块加载机制
May 25 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
JavaScrip如果基于url实现图片下载
Jul 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
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
JavaScript延迟加载
2021/03/09 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python制作动态字符图的实例
2019/01/27 Python
浅析python的Lambda表达式
2019/02/27 Python
python  logging日志打印过程解析
2019/10/22 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Pycharm github配置实现过程图解
2020/10/13 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
机械制造与自动化应届生求职信
2013/11/16 职场文书
求职推荐信范文
2013/12/01 职场文书
六一儿童节主持词
2014/03/21 职场文书
竞聘演讲稿
2014/04/24 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
五五普法心得体会
2014/09/04 职场文书
综合素质评价自我评价
2015/03/06 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang