如果说组件系统(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()
①用于暴露服务所维护的两个数据(播放列表与播放参数)，在指令中都是通过这两个接口来呈现数据的
服务的完整代码如下：
import { Injectable } from '@angular/core'; import { Audio } from './audio.model'; import { PlayData } from './play-data.model'; /** * 音频服务，只关心播放列表控制与进度控制 * 不提供组件支持，只提供列表控制方法接口及进度控制接口 */ @Injectable() export class AudioService { // 主音频标签 private _audio: HTMLAudioElement; // 当前列表中的音频 private playList: Audio[]; // 当前播放的数据 private playData: PlayData; private listenInterval; /** * 创建新的音频标签 */ constructor() { this._audio = document.createElement('audio'); this._audio.autoplay = false; this._audio.onplay = () => { let that = this; this.listenInterval = window.setInterval(() => { that.playData.Current = that._audio.currentTime; that.playData.Url = that._audio.src; that.playData.During = that._audio.duration; that.playData.Data = that._audio.buffered && that._audio.buffered.length ? (that._audio.buffered.end(0) || 0) : 0; }, 1000); this.playData.IsPlaying = true; }; this._audio.onended = () => { window.clearInterval(this.listenInterval); this.FillPlayData(); this.playData.IsPlaying = false; }; this._audio.onabort = () => { window.clearInterval(this.listenInterval); this.playData.Current = this._audio.currentTime; this.playData.Url = this._audio.src; this.playData.During = this._audio.duration; this.playData.Data = this._audio.buffered && this._audio.buffered.length ? (this._audio.buffered.end(0) || 0) : 0; this.playData.IsPlaying = false; }; this._audio.onpause = () => { window.clearInterval(this.listenInterval); this.playData.Current = this._audio.currentTime; this.playData.Url = this._audio.src; this.playData.During = this._audio.duration; this.playData.Data = this._audio.buffered && this._audio.buffered.length ? (this._audio.buffered.end(0) || 0) : 0; this.playData.IsPlaying = false; }; this.playData = { Style: 0, Index: 0 }; this.playList = []; } /** * 1.列表中无此音频则添加并播放 * 2.列表中存在此音频但未播放则播放 * 3.列表中存在此音频且在播放则暂停 * @param audio */ public Toggle(audio?: Audio): void { let tryGet = audio ? this.playList.findIndex((p) => p.Url === audio.Url) : this.playData.Index; if (tryGet < 0) { this.playList.push(audio); this.PlayIndex(this.playList.length); } else { if (tryGet === this.playData.Index) { if (this._audio.paused) { this._audio.play(); this.playData.IsPlaying = true; } else { this._audio.pause(); this.playData.IsPlaying = false; } } else { this.PlayIndex(tryGet); } } } /** * 若列表中无此音频则添加到列表的最后 * 若列表中无音频则添加后并播放 * @param audio */ public Add(audio: Audio): void { this.playList.push(audio); if (this.playList.length === 1) { this.PlayIndex(0); } } /** * 移除列表中指定索引的音频 * 若移除的就是正在播放的音频则自动播放新的同索引音频，不存在此索引则递减 * 若只剩这一条音频了则停止播放并移除 * @param index */ public Remove(index: number): void { this.playList.splice(index, 1); if (!this.playList.length) { this._audio.src = ''; } else { this.PlayIndex(index); } } /** * 下一曲 */ public Next(): void { switch (this.playData.Style) { case 0: if (this.playData.Index < this.playList.length) { this.playData.Index++; this.PlayIndex(this.playData.Index); } break; case 1: this.playData.Index = (this.playData.Index + 1) % this.playList.length; this.PlayIndex(this.playData.Index); break; case 2: this.playData.Index = (this.playData.Index + 1) % this.playList.length; this.PlayIndex(this.playData.Index); console.log('暂不考虑随机播放将视为列表循环播放'); break; case 3: this._audio.currentTime = 0; break; default: if (this.playData.Index < this.playList.length) { this.playData.Index++; this.PlayIndex(this.playData.Index); } break; } } /** * 上一曲 */ public Prev(): void { switch (this.playData.Style) { case 0: if (this.playData.Index > 0) { this.playData.Index--; this.PlayIndex(this.playData.Index); } break; case 1: this.playData.Index = (this.playData.Index - 1) < 0 ? (this.playList.length - 1) : (this.playData.Index - 1); this.PlayIndex(this.playData.Index); break; case 2: this.playData.Index = (this.playData.Index - 1) < 0 ? (this.playList.length - 1) : (this.playData.Index - 1); this.PlayIndex(this.playData.Index); console.log('暂不考虑随机播放将视为列表循环播放'); break; case 3: this._audio.currentTime = 0; break; default: if (this.playData.Index > 0) { this.playData.Index--; this.PlayIndex(this.playData.Index); } break; } } /** * 将当前音频跳转到指定百分比进度处 * @param percent */ public Skip(percent: number): void { this._audio.currentTime = this._audio.duration * percent; this.playData.Current = this._audio.currentTime; } public PlayList(): Audio[] { return this.playList; } public PlayData(): PlayData { return this.playData; } /** * 用于播放最后强行填满进度条 * 防止播放进度偏差导致的用户体验 */ private FillPlayData(): void { this.playData.Current = this._audio.duration; this.playData.Data = this._audio.duration; } /** * 尝试播放指定索引的音频 * 索引不存在则尝试递增播放，又失败则递减播放，又失败则失败 * @param index */ private PlayIndex(index: number): void { index = this.playList[index] ? index : this.playList[index + 1] ? (index + 1) : this.playList[index - 1] ? (index - 1) : -1; if (index !== -1) { this._audio.src = this.playList[index].Url; if (this._audio.paused) { this._audio.play(); this.playData.IsPlaying = true; } this.playData.Index = index; } else { console.log('nothing to be play'); } } }
三、使用服务：
接下来要使用服务了，再ng2中服务也要依赖具体的模块，我们得音频服务依赖的就是自己的音频模块，在模块的provider列表中配置它：
@NgModule({ imports: [ CommonModule, SharedModule ], declarations: [ AudioStudioComponent ], exports: [ AudioStudioComponent ], providers: [ AudioService ] })
接下来要实现服务的消费者——AudioStudioComponent 了，步骤如下：
1.在构造函数中注入服务：
constructor(public audio: AudioService) { }
2.使用Add()方法添加音频：