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


Posted in Javascript onFebruary 24, 2017

引言

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

一、基本项目准备:

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

最终项目音频部分的目录结构如图所示:

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

二、创建服务:

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);
 }

现在运行项目:

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

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

音频播放器的样式是崩塌的...因为这个组件是笔者另一个项目中直接copy过来了,在此demo项目中还没加上移动端rem适配,尴尬,不过大概的效果是展现出来了。 

完整项目代码下载:angular2-demo_3water.rar

四、总结:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
Bootstrap3多级下拉菜单
Feb 24 #Javascript
使用原生的javascript来实现轮播图
Feb 24 #Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 #Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 #Javascript
JavaScript中值类型和引用类型的区别
Feb 23 #Javascript
canvas绘制环形进度条
Feb 23 #Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 #Javascript
You might like
PHP strtok()函数的优点分析
2010/03/02 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php计算整个目录大小的方法
2015/06/01 PHP
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
Python中List.count()方法的使用教程
2015/05/20 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
python3实现微型的web服务器
2019/09/03 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
关于Django Models CharField 参数说明
2020/03/31 Python
如何提高python 中for循环的效率
2020/04/15 Python
keras输出预测值和真实值方式
2020/06/27 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
妇科医生自荐信
2013/11/05 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
迎八一活动主题
2014/01/31 职场文书
校庆标语集锦
2014/06/25 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL