Próbuję zaimplementować bardzo minimalny odtwarzacz audio dla strony internetowej.

Interfejs jest dość prosty. Posiada przycisk odtwarzania / pauzy oraz przycisk wyciszania / wyłączania wyciszenia.

Mam problem z implementacją wielu instancji tego samego odtwarzacza dla różnych ścieżek.

Javascript dla gracza to:

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=\"&#xe003;\"></span><span class=\"screen-reader-text\">Play</span>";
        }
        else {
            myAudio.pause();
            btnPlayPause.innerHTML = "<span aria-hidden=\"true\" data-icon=\"&#xe002;\"></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=\"&#xe001;\"></span><span class=\"screen-reader-text\">Mute</span>";
        }
        else {
            myAudio.muted = true;
            btnMute.innerHTML = "<span aria-hidden=\"true\" data-icon=\"&#xe000;\"></span><span class=\"screen-reader-text\">Unmute</span>";
        }
    });
});

Działa to dobrze dla pojedynczej ścieżki. Ale jeśli mam wiele ścieżek na tej samej stronie, staje się to problemem.

Zgaduję, że potrzebuję modyfikacji w składni, w której definiuję zmienną myAudio:

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

Nie wiem jednak, jak to zmienić, więc ten sam skrypt może kontrolować wiele ścieżek audio.

Jeśli to możliwe, chciałbym również mieć pewność, że jeśli użytkownik kliknie przycisk odtwarzania na innej ścieżce, utwór aktualnie odtwarzany „zatrzymuje się” lub „zatrzymuje się” i rozpoczyna się nowy utwór (więc 2 utwory nie są grając jeden na drugim).