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

前端之家收集整理的这篇文章主要介绍了Angular2 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()
用于暴露服务所维护的两个数据(播放列表与播放参数),在指令中都是通过这两个接口来呈现数据的

服务的完整代码如下:

audio.service.ts

三、使用服务:

接下来要使用服务了,再ng2中服务也要依赖具体的模块,我们得音频服务依赖的就是自己的音频模块,在模块的provider列表中配置它:

复制<a href=代码" style="margin:0px;float:left;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

@NgModule({
imports:[CommonModule,SharedModule],declarations:[AudioStudioComponent],exports:[AudioStudioComponent],providers:[AudioService]
})

复制<a href=代码" style="margin:0px;float:left;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

接下来要实现服务的消费者――AudioStudioComponent 了,步骤如下:

复制<a href=代码" style="margin:0px;float:left;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

1.在构造函数中注入服务:

constructor(publicaudio: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'});

复制<a href=代码" style="margin:0px;float:left;border:none;" src="http://common.cnblogs.com/images/copycode.gif">

Add方法添加的音频如果是列表中仅有的一条音频则会直接播放,所以如此添加两条音频会直接播放第一条音频。

再在组件内实现一个Skip方法用于进度控制:

publicSkip(e){this.audio.Skip(e.layerX/
document.getElementById('audio-total').getBoundingClientRect().width);
}

现在运行项目:

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

原文链接:https://www.f2er.com/angularjs/147229.html

猜你在找的Angularjs相关文章