为多个媒体播放器实现多个控件的最有效方法是什么？

Question

假设我有一个包含 3 个

<audio>

元素的网页，每个元素都有不同的

href=""

，我希望用户能够同时播放（暂停和控制）多个元素。

controls

属性不存在，因为我已经为暂停/播放创建了一个

<button>

元素，并为音量滑块创建了一个

<input type="range>

元素。这些通过 JavaScript 连接到

<audio>

元素：

var playing = false;

$(".pause-play").on("click", function() {
     if (playing == false) {
        $(".player").get(0).play();
        $("#btn-icon").removeClass("fa-play");
        $("#btn-icon").addClass("fa-pause");
        playing = true;
    } else {
        $(".player").get(0).pause();
        $("#btn-icon").removeClass("fa-pause");
        $("#btn-icon").addClass("fa-play");
        playing = false;
    }
})

$(".volume").on("input",function(e) {
    const value = parseInt(e.target.value, 10);
    const vol = value / 100;
    $(".player").prop("volume", vol);
});

这适用于单个

.player

，为其他 2 个玩家制作它的最明显方法是制作 2 个相同的

<audio>

元素，向所有类添加“2”，复制粘贴 JavaScript暂停/播放和音量，并将其中的选择器替换为相应的数字。

但是，必须有一个非常高效的做法。我知道对于 HTML，我可以创建一个 PHP 循环并在每个

<audio>

实例的类中添加“1”、“2”、“3”...，但我无法使用 JS/JQuery我对其语法的了解（极低）。有什么好主意吗？