当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > Angular2 Service实现简单音乐播放器服务

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

2018年05月01日  | 移动技术网IT编程  | 我要评论

何者为卿狂txt下载,连锁加盟店餐饮,福隆平

引言

如果说组件系统(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()方法添加音频：

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适配，尴尬，不过大概的效果是展现出来了。 

完整项目代码下载：

四、总结：

总的来说ng2的服务光使用来说难度不高，关键在于如何来完美发挥服务的特性，来做数据共享传递，以及封装网络请求等都是很好的选择。另外本文没有专门去讲服务的一些问题点，但使用服务还是有一些需要注意的地方的，比如只能在单个模块中的provider中声明，尽量保持全局单例，以及在懒加载模块中会创建子注入器等，实际项目中还是要解决一些问题的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网