258资源分享网

1. 需求分析与开发方案1.1 需求简介最近产品给我们提出了“在小程序中播放音频课程”的需求，主要是有四个要点：课程管理：进入某个课程的播放页面，获取全部音频列表，但暂时不播放。音频管理：支持在播放页面，点 ...

 

 

 

1. 需求分析与开发方案

1.1 需求简介

最近产品给我们提出了“在小程序中播放音频课程”的需求，主要是有四个要点：

课程管理：进入某个课程的播放页面，获取全部音频列表，但暂时不播放。

音频管理：支持在播放页面，点击任意音频进行播放；可自动播放下一首。比如这样

 

进度控件：支持拖动修改进度／上下首／暂停／播放，就像下面这样。

 

全局播放：当用户暂时离开小程序时，在微信聊天列表页顶部展示背景音频。

就像这样子。

 

1.2 开发分析 好了，问题来了，怎么实现上面这几个需求呢？

我陷入了沉思…………

第一条“课程管理”不难，全局维护一个数组就好了。

第二条“音频管理”看上去是个麻烦，一开始我想到了小程序提供的audio控件。

但是随即我就否决掉了这种想法，理由主要有两点：

微信官方提供的audio控件有默认的样式，如下图，这与设计稿的需求不相符。

经过在微信官方提供的小程序实例Demo中亲测，如果使用audio控件，那么当我退出当前页面的时候，音频会消失，这没有办法满足PM要求的“全局播放”

因此，我决定采用微信提供的backgroundAudioManager。

1.2.1 backgroundAudioManager简介

按官方文档的说法，backgroundAudioManager是：

全局唯一的背景音频管理器

下面列出它的部分重要属性和重要的方法：

属性：

duration：当前音频长度，可以用来初始化播放控件的值。

currentTime：当前播放的位置，可以用来更新播放控件的进度值

paused：false为播放，true表示停止／暂停

src：音频数据源，注意设置src的时候会自动播放

title：音频标题（刚刚在微信聊天列表页顶部展示的音频title“为什么秋冬季节孩子易生病”，就是通过这里设置的）

方法：

play／pause／stop／seek：可以进行音频常见的播放控制，其中seek是跳转到特定播放进度的方法

onPlay／onPause／onStop／onEnded：响应特定事件，其中onStop是主动停止，onEnded是自动播放完毕（这可用于实现“连续播放”）

onTimeUpdate：背景音频播放进度更新事件，可与前面的currentTime属性结合在一起，去更新控件的值。

onWaiting／onCanplay：音频通常不会立刻就能播放，这两个方法可以在音频加载的时候为用户做一些提示。

更多的消息请查看它的官方文档。

1.2.2 播放控件

第三条“播放控件”也不算太难，播放／暂停／上下首都用小图片就可以了。

但是难点在于播放进度条的模拟，前面已经说到audio控件的样式是不符合需求的。

那么我决定采用slider来模拟，应该也可以搞定。

第四条，前面已经说了，用backgroundAudioManager实现“全局播放”。

1.2.3 开发方案确定

好了，需求分析得差不多了，我们要开发这个需求，需要三个对象，

课程管理对象，负责维护课程信息和课程音频列表，不负责播放

 

音频管理对象，即backgroundAudioManager，负责管理音频的播放，其中只有changeAudio方法具有修改音频的权限