求Angular 4音频管理npm包及PubNub集成跨设备发声方案

嘿，我来帮你梳理这两个问题的解决方案～

当然有不少适合Angular 4的音频管理工具，这里推荐几个常用且兼容的：

• ng2-audio-player：专门为Angular 2+（包括Angular 4）打造的音频播放器组件，支持播放、暂停、进度条控制等基础功能，配置简单，直接就能集成到组件中。
• howler.js：虽然不是Angular专属的包，但它是一个强大的音频库，支持多格式、音效控制，你可以通过封装Angular服务的方式轻松集成到Angular 4项目里，灵活性很高。
• angular-audio-player：轻量级的Angular音频组件，支持播放列表、音量调节等功能，适配Angular 4版本，文档也比较清晰。

没有专门直接适配这个需求的“一站式”npm包，但可以通过组合PubNub的Angular SDK和音频工具来实现，步骤如下：

1. 安装PubNub的Angular兼容包：可以用pubnub-angular2，它支持Angular 4，执行安装命令：

   npm install pubnub-angular2 --save
   

2. 配置PubNub服务：在你的Angular模块中导入并配置PubNub，填入你的PubNub密钥：

   import { PubNubAngular } from 'pubnub-angular2';
   
   @NgModule({
     providers: [PubNubAngular]
   })
   export class AppModule {
     constructor(pubnub: PubNubAngular) {
       pubnub.init({
         publishKey: '你的发布密钥',
         subscribeKey: '你的订阅密钥'
       });
     }
   }
   

3. 发送触发信号：在发送端组件中，调用PubNub的publish方法向指定频道发送信号：

   publishSignal() {
     this.pubnub.publish({
       channel: 'audio-trigger-channel',
       message: { playAudio: true }
     });
   }
   

4. 接收信号并播放音频：在移动端的接收组件中，订阅频道，收到消息后触发音频播放（这里可以用原生Audio对象或者上面提到的音频包）：

   ngOnInit() {
     this.pubnub.subscribe({
       channels: ['audio-trigger-channel'],
       triggerEvents: ['message']
     });
   
     this.pubnub.getMessage('audio-trigger-channel', (msg) => {
       if (msg.message.playAudio) {
         // 用原生Audio播放
         const audio = new Audio('你的音频文件路径');
         audio.play();
         // 或者用ng2-audio-player等组件的播放方法
       }
     });
   }
   

你可以把这段逻辑整合到你现有的演示代码里，就能实现跨设备触发播放声音的功能啦～

内容的提问来源于stack exchange，提问作者Noam Shvacher