微信小程序全局音频播放，实现分析

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 监听

作者：佰晟
链接：https://www.jianshu.com/p/407f551942e2
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。