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

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 "color: #ff0000">三、使用服务：

接下来要使用服务了，再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适配，尴尬，不过大概的效果是展现出来了。 
完整项目代码下载：angular2-demo_jb51.rar
四、总结：
总的来说ng2的服务光使用来说难度不高，关键在于如何来完美发挥服务的特性，来做数据共享传递，以及封装网络请求等都是很好的选择。另外本文没有专门去讲服务的一些问题点，但使用服务还是有一些需要注意的地方的，比如只能在单个模块中的provider中声明，尽量保持全局单例，以及在懒加载模块中会创建子注入器等，实际项目中还是要解决一些问题的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。