Angular2音乐播放器服务实战：组件间协作与全局控制

本文主要介绍了如何在Angular 2中实现一个简单音乐播放器服务，将音频播放功能作为一个独立的模块，即AudioModule，来提升组件间的通信效率和代码复用性。服务在Angular 2中的角色被比喻为组件之间的“血液”，提供全局单例和依赖注入特性。 首先，文章强调了服务在Angular 2中的基础概念，它只是一个带有`@Injectable`装饰器的类，允许组件在需要时注入并共享数据。在音频播放服务中，关键的私有变量包括： 1. **音频对象**：用于通过JavaScript对HTML5音频进行播放控制，尽管不需要添加到DOM中，但它是服务内部操作音频的核心。 2. **播放列表数据**：服务内部维护的播放列表，消费者可以通过接口添加、删除或更改歌曲，实际播放时从这个列表中获取。 3. **正在播放音频的参数**：包括音频时长、播放进度和播放模式（例如随机播放）等，这些数据反映了当前播放状态。 4. **播放时的轮询监听**：为了实现实时更新播放参数，服务会在播放过程中启动轮询，每秒检查音频状态并相应调整。 在服务初始化阶段，主要包括以下步骤： - **创建音频对象**：直接使用`document.createElement('audio')`，但不涉及DOM插入，仅用于后续的播放控制操作。 - **初始化私有变量**：播放列表是一个数组，成员参数遵循`audio.model.ts`规范，存储播放源和其他相关信息。 文章还展示了项目结构，包括音频服务主文件audio.service.ts、音频控制中心组件audio-studio.component.ts，以及用于数据交换的TS接口文件play-data.model.ts和audio.model.ts。通过这样的设计，作者旨在创建一个模块化的、易于维护的音乐播放器，使得音频播放服务能在整个应用程序中方便地被其他组件调用和控制。