Остановить звук, созданный с помощью javascript

Question

Вот примерно как выглядит мой сценарий.

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();
    } ...
}

И это примерно так. Итак, в зависимости от того, какая кнопка нажата, воспроизводится другая песня. Но я хочу сделать так, чтобы нажатие кнопки не только запускало соответствующую песню, но и останавливало любую песню, которая сейчас играет. Поскольку аудиообъект создается локально и исчезает после вызова функции, как мне это сделать? Нет ли способа просто попросить страницу остановить воспроизведение звука, не указав, откуда он исходит?

Answer 1

Вопрос спрашивает, как можно приостановить воспроизводимый в данный момент звук при выборе нового.

Есть дополнительная проблема. Данный код создает новый элемент каждый раз при нажатии кнопки, но никогда не избавляется от него, поэтому постепенно хранилище будет заполняться аудиоэлементами, которые никогда не будут повторно посещаться.

Простой способ обойти это - иметь только один элемент audio и изменять 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 на каждой из ваших кнопок, вместо того, чтобы сортировать, какой звук воспроизводить с помощью идентификатора.