Angular2 Service实践——实现简单音乐播放服务

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

一、基本项目准备:

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

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

服务的完整代码如下:

  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 }
audio.service.ts

 

三、使用服务:

接下来要使用服务了,再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中声明,尽量保持全局单例,以及在懒加载模块中会创建子注入器等,实际项目中还是要解决一些问题的。

posted @ 2017-02-23 19:06 Yitim 阅读(...) 评论(...) 编辑 收藏