微信小程序全局音频播放

1. 需求分析

育儿柚道小程序中有针对育儿教育提供的音频课程，主要包含读书、读文的音频内容。

1.1 功能需求

• 课程音频：包含课程音频的地方有三处
  1. 课程卡片，包含在 scrollview 中的试听内容；

音乐卡片

2. 课程详情页的课程章节列表；

   
   
   

   课程详情页

3. 底部与导航 tab 结合的播放控件

   
   
   

   Player bar

• 音频管理：
  1）单击课程卡片上的音频，播放并触发底部播放控件，显示播放状态
  2）进入课程详情页时，单击列表内容播放单条内容，点击主播放按钮，连续播放列表中的内容
  3）底层导航的播放控件播放音频

• 音频控件，有两处音频控件。
  1）底部导航音频控件，支持【下一首/暂停/播放】
  2）详情页中，支持【拖动进度/暂停/播放】

• 全局播放：离开小程序后，微信聊天页顶部显示当前播放的音频

  
  
  

  图片.png

1.2 系统分析与设计

综上述的需求，分析出我们的系统需求，

1. 音频播放列表维护
2. 音频播放控制管理

小程序中对于音频播放有两种

• 音频播放控件 audio
• 全局唯一背景音频管理器
  由于我们的需求中需要对音频做全局管理，所以选型微信提供的:
  backgroundAudioManager

我们用到的属性和方法如下：

音乐播放器的组成

图片.png

将播放器的产品组成分为三层，

1. 组件层主要处理 UI、交互、数据展现
2. 播放控制层，用于管理整体播放控制
3. 事件处理层，监听处理全局系统中的音频事件，播放、暂停、停止和播放进度监听

播放器组件

图片.png

播放器控制

图片.png

先看一下我们用到的控制方法和微信音频播放对应的 api

用到的 api 如下

wx.playBackgroundAudio(OBJECT)
使用后台播放器播放音乐，对于微信客户端来说，只能同时有一个后台音乐在播放。

wx.pauseBackgroundAudio()
暂停播放音乐。

wx.seekBackgroundAudio(OBJECT)
控制音乐播放进度

wx.stopBackgroundAudio()
停止播放音乐。

wx.onBackgroundAudioPlay(CALLBACK)

监听音乐播放。
wx.onBackgroundAudioPause(CALLBACK)

监听音乐暂停。
wx.onBackgroundAudioStop(CALLBACK)
监听音乐停止。

onLauch 监听