停止动态创建的音频

Question

我正在播放来自 Angular 中某项服务的音频，但我无法让它停止。这是我的 play() 方法：

play(item: string): void {
  const audio = new Audio();
  audio.src = item;
  audio.load();
  audio.play();
}

然后，在我的组件中我创建了一个 mute() 方法，我想在其中停止所有当前播放的音频：

mute(): void {
  const sounds = document.getElementsByTagName('audio');
  console.log(sounds);
  for (let i = 0; i < sounds.length; i++) {
    sounds[i].pause();
  }
}

但是，它在我的 console.log 中没有显示任何声音，因此，none 正在暂停。

Answer 1

document.getElementsByTagName('audio') 找不到音频标签，因为它们尚未添加到文档中。

您可以使用 play() 方法末尾的这行代码将音频元素添加到文档中：document.getElementsByTagName("body")[0].appendChild(audio);

或者，您可以将音频对象保存在一个数组中，并使该数组可用于您的组件，而不是使用 document.getElementsByTagName('audio')。在 Angular 应用程序中，这种方法被认为优于直接 DOM 操作。

Answer 2

在您的 play 方法中，您创建了 Audio 的实例并让它播放，但除了浏览器之外没有人知道这个实例...

查询 DOM 不会导致您的 Audio 实例... 您必须持有所有正在播放的音频的列表 file/s。和静音停止 them/it.

停止动态创建的音频

Stop dynamically created audios

javascript

html5-audio

typescript

angular