不同页面中的 HTML5 音频独立播放

Question

我的 ionic 移动项目中有两个页面。 每个页面都有 html5 音频控件。 当我在第一页播放音频时，我可以在不停止音乐的情况下浏览其他应用程序，这很好。 如果我从其他应用程序播放任何类型的音频，它会在我的第一页停止我的音频，这也很好。 问题是，当我在第一页播放音频而在第二页播放音频时，两个音频都在播放。 当我在不同页面播放音频时，如何停止或暂停其他页面上的音频？

Answer 1

有两种方法：

1. 打开第二页时停止第一页的音频

2. 让自己成为一个音频服务：

@Injectable()
export class AudioService {
    audio;

   setAudioFromUrl(url: string){
     this.pause();
     this.audio = new Audio(url)
   }

  pause(){
    if(this.audio)
      this.audio.pause()

  }
}

用法：将服务添加到模块提供程序。将其注入到使用它的组件中。在每个组件中使用此服务设置您要播放的文件