Я пытаюсь реализовать очень минимальный аудиоплеер для веб-сайта.

Интерфейс довольно прост. Он имеет кнопку воспроизведения / паузы и кнопку отключения / включения звука.

У меня проблема в реализации нескольких экземпляров одного и того же плеера для разных дорожек.

Javascript для игрока:

jQuery(function() {
    var myAudio = document.getElementById("myAudio");
    var btnPlayPause = document.getElementById("btnPlayPause");
    var btnMute = document.getElementById("btnMute");

    btnPlayPause.addEventListener("click", function() {
        if (myAudio.paused || myAudio.ended) {
            myAudio.play();
            btnPlayPause.innerHTML = "<span aria-hidden="\"true\"" data-icon="\"\""></span><span class="\"screen-reader-text\"">Play</span>";
        }
        else {
            myAudio.pause();
            btnPlayPause.innerHTML = "<span aria-hidden="\"true\"" data-icon="\"\""></span><span class="\"screen-reader-text\"">Pause</span>";
        }
    });

    btnMute.addEventListener("click", function() {
        if (myAudio.muted) {
            myAudio.muted = false;
            btnMute.innerHTML = "<span aria-hidden="\"true\"" data-icon="\"\""></span><span class="\"screen-reader-text\"">Mute</span>";
        }
        else {
            myAudio.muted = true;
            btnMute.innerHTML = "<span aria-hidden="\"true\"" data-icon="\"\""></span><span class="\"screen-reader-text\"">Unmute</span>";
        }
    });
});

Это прекрасно работает для одного трека. Но если у меня есть несколько треков на одной странице, это становится проблемой.

Я предполагаю, что мне нужно изменить синтаксис, в котором я определяю переменную myAudio:

var myAudio = document.getElementById("myAudio");

Однако я не уверен, как это изменить, чтобы один и тот же скрипт мог управлять несколькими звуковыми дорожками.

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