Остановить звук, созданный с помощью javascript
Вот примерно так выглядит мой скрипт.
var ButtonSelect = document.querySelectorAll(".musicBtn")
ButtonSelect.forEach(element => element.addEventListener("click", playMusic))
function playMusic(){
var audio = new Audio("music1.mp3");
if (this.id == "A")
audio.play();
else if (this.id == "B") {
audio.src = "music2.mp3";
audio.play();
} else if (this.id == "C") {
audio.src = "music3.mp3";
audio.play();
} ...
}
И это примерно так и продолжается. Таким образом, в зависимости от того, какая кнопка нажата, играет другая песня. Но я хочу сделать так, чтобы нажатие кнопки не только запускало соответствующую песню, но и останавливало любую песню, воспроизводимую в данный момент. Поскольку звуковой объект создается локально и исчезает после вызова функции, как мне это сделать? Нет ли способа просто попросить страницу остановить воспроизведение любого звука, не указывая, откуда он исходит?
Взгляните на Как правильно удалить аудио html5 без добавления в DOM? Он показывает, как можно манипулировать элементом Audio в DOM для изменения звука.
Спасибо, но я пытаюсь сделать это без использования элемента html audio.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вопрос спрашивает, как можно приостановить воспроизводимый в данный момент звук при выборе нового.
Есть дополнительная проблема. Данный код создает новый элемент каждый раз, когда нажимается кнопка, но он никогда не избавляется от него, поэтому постепенно хранилище будет заполняться аудиоэлементами, которые никогда не будут пересматриваться.
Простой способ обойти это — иметь только один аудиоэлемент и изменять src при нажатии кнопки. Таким образом, мы не наращиваем элементы, которые впоследствии становятся излишними.
Попробуйте этот код в первую очередь:
var ButtonSelect = document.querySelectorAll(".musicBtn")
var audio = new Audio("music1.mp3");
ButtonSelect.forEach(element => element.addEventListener("click", playMusic))
function playMusic(){
audio.pause();
if (this.id == "A") {
audio.src = "music1.mp3";
audio.play();
}
else if (this.id == "B") {
audio.src = "music2.mp3";
audio.play();
} else if (this.id == "C") {
audio.src = "music3.mp3";
audio.play();
}
}
Если это работает нормально, вы можете рассмотреть возможность упрощения своего кода, например, используя источник звука в качестве атрибута data-src для каждой из ваших кнопок, вместо того, чтобы выбирать, какой звук воспроизводить через идентификатор.
Аргх, и это было НАСТОЛЬКО просто. Большое спасибо, чувак.
Отвечает ли это на ваш вопрос? Кнопка JavaScript Остановить все аудио на странице