ng4使用的音频文件_Angular2 Service实践——实现简单音乐播放服务

引言:如果说组件系统(Component)是ng2应用的躯体，那把服务(Service)认为是流通于组件之间并为其带来生机的血液再合适不过了。组件间通信的其中一种优等选择就是使用服务，在ng1里就有了广泛使用，而ng2保持了服务的全部特性，包括其全局单例与依赖注入。今天就来实践一下ng2的服务(Service)这一利器，来实现一个简单的音乐播放器，重点在于使用服务来进行音频的播放控制与全局范围的调用。

一、基本项目准备：

考虑到音频播放是个比较通用的服务，决定将其创建为一个单独的模块AudioModule，并且在里面新增音频服务主文件audio.service.ts，通用的音频控制中心组件audio-studio.component.ts，作为辅助的TS接口文件play-data.model.ts与audio.model.ts。

最终项目音频部分的目录结构如图所示：

二、创建服务：

ng2的服务，照官网的说法来解释，其实只是个带有Injectable装饰器的类而已，没有其他任何特殊的定义，所以非常简单，不过定义如此简单的服务却可以完成非常多酷炫的功能。

在TypeScript下定义变量有了public与private的访问级区分，所以定义服务通常套路就是，定义服务内使用的私有变量，在constructor构造函数中进行初始化操作，定义共有方法给服务的消费者使用。

专注于音频播放服务的场景，我们需要的私有变量有：

1.音频对象

用于通过JS进行H5音频的播放控制

2.播放列表数据

服务内部使用的播放列表概念，实际播放音频时都是从此列表中播放音频，服务的消费者可以调用接口来操作此列表

3.正在播放音频的参数

音频时长，当前进度以及播放模式(随机播放之类)等

4.播放时的轮询监听变量

用于音频播放过程中自动启动轮询，定时(每秒)更新播放参数，当音频暂停或停止时取消此监听

服务初始化时需要做的事情有：

1.创建音频对象

可直接使用document.createElement('audio')，但不需要将其添加到DOM中。

后续的播放控制均使用此对象来操作。

2.初始化私有变量

私有变量中播放列表是一个数组，成员的参数使用audio.model.ts来规范化，

必须包含一个Url参数存放播放源，以及其他可选参数

相同的播放参数也用一个play-data.model.ts来规范化

3.给音频添加onplay、onpause、onend等播放事件的监听

此服务提供的公有接口包括：

1. Toggle(audio)

判断传入的音频是否已在列表中，已存在则播放或暂停，若不存在则添加进来并播放

2. Add()

仅添加音频到列表中

3. Remove()

移除音频出播放列表，需要考虑好移除后对播放队列的影响，比如是否是正在播放的音频被移除等等4. Next()

5. Prev()

上一曲与下一曲操作，需要考虑到播放模式

6.Skip()

进行播放进度的跳转7. PlayList()

8. PlayData()

用于暴露服务所维护的两个数据(播放列表与播放参数)，在指令中都是通过这两个接口来呈现数据的

<