1. 需求分析
育儿柚道小程序中有针对育儿教育提供的音频课程,主要包含读书、读文的音频内容。
1.1 功能需求
课程音频:包含课程音频的地方有三处 课程卡片,包含在 scrollview 中的试听内容;音乐卡片
课程详情页的课程章节列表;
课程详情页
底部与导航 tab 结合的播放控件
Player bar
音频管理:
1)单击课程卡片上的音频,播放并触发底部播放控件,显示播放状态
2)进入课程详情页时,单击列表内容播放单条内容,点击主播放按钮,连续播放列表中的内容
3)底层导航的播放控件播放音频
音频控件,有两处音频控件。
1)底部导航音频控件,支持【下一首/暂停/播放】
2)详情页中,支持【拖动进度/暂停/播放】
全局播放:离开小程序后,微信聊天页顶部显示当前播放的音频
图片.png
1.2 系统分析与设计
综上述的需求,分析出我们的系统需求,
音频播放列表维护音频播放控制管理
小程序中对于音频播放有两种
音频播放控件 audio全局唯一背景音频管理器
由于我们的需求中需要对音频做全局管理,所以选型微信提供的:
backgroundAudioManager
我们用到的属性和方法如下:
音乐播放器的组成
图片.png
将播放器的产品组成分为三层,
组件层主要处理 UI、交互、数据展现播放控制层,用于管理整体播放控制事件处理层,监听处理全局系统中的音频事件,播放、暂停、停止和播放进度监听
播放器组件
图片.png
播放器控制
图片.png
先看一下我们用到的控制方法和微信音频播放对应的 api
用到的 api 如下
wx.playBackgroundAudio(OBJECT)使用后台播放器播放音乐,对于微信客户端来说,只能同时有一个后台音乐在播放。wx.pauseBackgroundAudio()暂停播放音乐。wx.seekBackgroundAudio(OBJECT)控制音乐播放进度wx.stopBackgroundAudio()停止播放音乐。wx.onBackgroundAudioPlay(CALLBACK)监听音乐播放。wx.onBackgroundAudioPause(CALLBACK)监听音乐暂停。wx.onBackgroundAudioStop(CALLBACK)监听音乐停止。
onLauch 监听
作者:佰晟
链接:/p/407f551942e2
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
如果觉得《微信小程序全局音频播放 实现分析》对你有帮助,请点赞、收藏,并留下你的观点哦!