Остановить динамически созданные аудио

Я играю аудио из сервиса в 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 и, следовательно, ни один из них не останавливается.

Источник

2 ответа

Решение

document.getElementsByTagName('audio') не находит аудио-теги, потому что они не были добавлены в документ.

Вы можете добавить аудио-элементы в документ с этой строкой кода в конце вашего play()-метод: document.getElementsByTagName("body")[0].appendChild(audio);

В качестве альтернативы вы можете сохранить аудио объект в массиве и сделать этот массив доступным для вашего компонента вместо использования document.getElementsByTagName('audio'), Этот подход считается предпочтительным по сравнению с прямым манипулированием DOM в приложениях Angular.

Источник

В вашем play Метод, который вы создали экземпляр Audio и пусть играет, но никто кроме браузера не знает об этом экземпляре...

Запрос DOM не приведет к вашему Audio экземпляры... Вы ДОЛЖНЫ содержать список всех воспроизводимых аудиофайлов. и на немой остановить их / это.

Источник
Другие вопросы по тегам