引言: 如果说组件系统(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()
用于暴露服务所维护的两个数据(播放列表与播放参数),在指令中都是通过这两个接口来呈现数据的
服务的完整代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 import { Injectable } from '@angular/core'; 2 import { Audio } from './audio.model'; 3 import { PlayData } from './play-data.model'; 4 5 /** 6 * 音频服务,只关心播放列表控制与进度控制 7 * 不提供组件支持,只提供列表控制方法接口及进度控制接口 8 */ 9 @Injectable() 10 export class AudioService { 11 // 主音频标签 12 private _audio: HTMLAudioElement; 13 // 当前列表中的音频 14 private playList: Audio[]; 15 // 当前播放的数据 16 private playData: PlayData; 17 private listenInterval; 18 /** 19 * 创建新的音频标签 20 */ 21 constructor() { 22 this._audio = document.createElement('audio'); 23 this._audio.autoplay = false; 24 this._audio.onplay = () => { 25 let that = this; 26 this.listenInterval = window.setInterval(() => { 27 that.playData.Current = that._audio.currentTime; 28 that.playData.Url = that._audio.src; 29 that.playData.During = that._audio.duration; 30 that.playData.Data = that._audio.buffered && 31 that._audio.buffered.length ? 32 (that._audio.buffered.end(0) || 0) : 33 0; 34 }, 1000); 35 this.playData.IsPlaying = true; 36 }; 37 this._audio.onended = () => { 38 window.clearInterval(this.listenInterval); 39 this.FillPlayData(); 40 this.playData.IsPlaying = false; 41 }; 42 this._audio.onabort = () => { 43 window.clearInterval(this.listenInterval); 44 this.playData.Current = this._audio.currentTime; 45 this.playData.Url = this._audio.src; 46 this.playData.During = this._audio.duration; 47 this.playData.Data = this._audio.buffered && 48 this._audio.buffered.length ? 49 (this._audio.buffered.end(0) || 0) : 50 0; 51 this.playData.IsPlaying = false; 52 }; 53 this._audio.onpause = () => { 54 window.clearInterval(this.listenInterval); 55 this.playData.Current = this._audio.currentTime; 56 this.playData.Url = this._audio.src; 57 this.playData.During = this._audio.duration; 58 this.playData.Data = this._audio.buffered && 59 this._audio.buffered.length ? 60 (this._audio.buffered.end(0) || 0) : 61 0; 62 this.playData.IsPlaying = false; 63 }; 64 this.playData = { Style: 0, Index: 0 }; 65 this.playList = []; 66 } 67 68 /** 69 * 1.列表中无此音频则添加并播放 70 * 2.列表中存在此音频但未播放则播放 71 * 3.列表中存在此音频且在播放则暂停 72 * @param audio 73 */ 74 public Toggle(audio?: Audio): void { 75 let tryGet = audio ? 76 this.playList.findIndex((p) => p.Url === audio.Url) : 77 this.playData.Index; 78 if (tryGet < 0) { 79 this.playList.push(audio); 80 this.PlayIndex(this.playList.length); 81 } else { 82 if (tryGet === this.playData.Index) { 83 if (this._audio.paused) { 84 this._audio.play(); 85 this.playData.IsPlaying = true; 86 } else { 87 this._audio.pause(); 88 this.playData.IsPlaying = false; 89 } 90 } else { 91 this.PlayIndex(tryGet); 92 } 93 } 94 } 95 96 /** 97 * 若列表中无此音频则添加到列表的最后 98 * 若列表中无音频则添加后并播放 99 * @param audio 100 */ 101 public Add(audio: Audio): void { 102 this.playList.push(audio); 103 if (this.playList.length === 1) { 104 this.PlayIndex(0); 105 } 106 } 107 108 /** 109 * 移除列表中指定索引的音频 110 * 若移除的就是正在播放的音频则自动播放新的同索引音频,不存在此索引则递减 111 * 若只剩这一条音频了则停止播放并移除 112 * @param index 113 */ 114 public Remove(index: number): void { 115 this.playList.splice(index, 1); 116 if (!this.playList.length) { 117 this._audio.src = ''; 118 } else { 119 this.PlayIndex(index); 120 } 121 } 122 123 /** 124 * 下一曲 125 */ 126 public Next(): void { 127 switch (this.playData.Style) { 128 case 0: 129 if (this.playData.Index < this.playList.length) { 130 this.playData.Index++; 131 this.PlayIndex(this.playData.Index); 132 } 133 break; 134 case 1: 135 this.playData.Index = (this.playData.Index + 1) % this.playList.length; 136 this.PlayIndex(this.playData.Index); 137 break; 138 case 2: 139 this.playData.Index = (this.playData.Index + 1) % this.playList.length; 140 this.PlayIndex(this.playData.Index); 141 console.log('暂不考虑随机播放将视为列表循环播放'); 142 break; 143 case 3: 144 this._audio.currentTime = 0; 145 break; 146 default: 147 if (this.playData.Index < this.playList.length) { 148 this.playData.Index++; 149 this.PlayIndex(this.playData.Index); 150 } 151 break; 152 } 153 } 154 155 /** 156 * 上一曲 157 */ 158 public Prev(): void { 159 switch (this.playData.Style) { 160 case 0: 161 if (this.playData.Index > 0) { 162 this.playData.Index--; 163 this.PlayIndex(this.playData.Index); 164 } 165 break; 166 case 1: 167 this.playData.Index = (this.playData.Index - 1) < 0 ? 168 (this.playList.length - 1) : 169 (this.playData.Index - 1); 170 this.PlayIndex(this.playData.Index); 171 break; 172 case 2: 173 this.playData.Index = (this.playData.Index - 1) < 0 ? 174 (this.playList.length - 1) : 175 (this.playData.Index - 1); 176 this.PlayIndex(this.playData.Index); 177 console.log('暂不考虑随机播放将视为列表循环播放'); 178 break; 179 case 3: 180 this._audio.currentTime = 0; 181 break; 182 default: 183 if (this.playData.Index > 0) { 184 this.playData.Index--; 185 this.PlayIndex(this.playData.Index); 186 } 187 break; 188 } 189 } 190 191 /** 192 * 将当前音频跳转到指定百分比进度处 193 * @param percent 194 */ 195 public Skip(percent: number): void { 196 this._audio.currentTime = this._audio.duration * percent; 197 this.playData.Current = this._audio.currentTime; 198 } 199 200 public PlayList(): Audio[] { 201 return this.playList; 202 } 203 204 public PlayData(): PlayData { 205 return this.playData; 206 } 207 208 /** 209 * 用于播放最后强行填满进度条 210 * 防止播放进度偏差导致的用户体验 211 */ 212 private FillPlayData(): void { 213 this.playData.Current = this._audio.duration; 214 this.playData.Data = this._audio.duration; 215 } 216 217 /** 218 * 尝试播放指定索引的音频 219 * 索引不存在则尝试递增播放,又失败则递减播放,又失败则失败 220 * @param index 221 */ 222 private PlayIndex(index: number): void { 223 index = this.playList[index] ? index : 224 this.playList[index + 1] ? (index + 1) : 225 this.playList[index - 1] ? (index - 1) : -1; 226 if (index !== -1) { 227 this._audio.src = this.playList[index].Url; 228 if (this._audio.paused) { 229 this._audio.play(); 230 this.playData.IsPlaying = true; 231 } 232 this.playData.Index = index; 233 } else { 234 console.log('nothing to be play'); 235 } 236 } 237 }
三、使用服务:
接下来要使用服务了,再ng2中服务也要依赖具体的模块,我们得音频服务依赖的就是自己的音频模块,在模块的provider列表中配置它:
@NgModule({
imports: [ CommonModule, SharedModule ],
declarations: [ AudioStudioComponent ],
exports: [ AudioStudioComponent ],
providers: [ AudioService ]
})
接下来要实现服务的消费者——AudioStudioComponent 了,步骤如下:
1.在构造函数中注入服务:
constructor(public audio: AudioService) { }
2.使用Add()方法添加音频:
audio.Add({Url: '/assets/audio/唐人街.mp3', Title: '唐人街-林宥嘉',
Cover: '/assets/img/2219A91D.jpg'});
audio.Add({Url: '/assets/audio/自然醒.mp3', Title: '自然醒-林宥嘉',
Cover: '/assets/img/336076CD.jpg'});
Add方法添加的音频如果是列表中仅有的一条音频则会直接播放,所以如此添加两条音频会直接播放第一条音频。
再在组件内实现一个Skip方法用于进度控制:
public Skip(e) { this.audio.Skip(e.layerX / document.getElementById('audio-total').getBoundingClientRect().width); }
现在运行项目:
音频播放器的样式是崩塌的...因为这个组件是笔者另一个项目中直接copy过来了,在此demo项目中还没加上移动端rem适配,尴尬,不过大概的效果是展现出来了。
完整项目代码放在本人github上: https://github.com/yitimo/angular2-demo-yitim
四、总结:
总的来说ng2的服务光使用来说难度不高,关键在于如何来完美发挥服务的特性,来做数据共享传递,以及封装网络请求等都是很好的选择。另外本文没有专门去讲服务的一些问题点,但使用服务还是有一些需要注意的地方的,比如只能在单个模块中的provider中声明,尽量保持全局单例,以及在懒加载模块中会创建子注入器等,实际项目中还是要解决一些问题的。