如何为单个网页上的多个播放/暂停按钮制作单个 Javascript 脚本？

Question

我找到了三个可能的脚本，用于我网页的音频播放/暂停按钮。顺便说一下，我只想显示播放/暂停按钮，而不是停止按钮。我想隐藏默认音频 HTML5 媒体元素附带的控件。这些脚本按预期工作得很好。 问题是我想让一个脚本适用于我网页上的多个播放/暂停按钮（多个声音文件）。我计划在我的页面上有很多音频，不想在一个页面上包含很多 Javascript 脚本 - 所有按钮只需要一个脚本。

1. 一个脚本是javascript。但是，它仅适用于一个播放/暂停按钮，不适用于多个。
2. 另一个脚本是 jQuery。但是，它也仅适用于一个播放/暂停按钮。
3. 第三个脚本是javascript。它适用于页面上的不同播放按钮。问题是该脚本中没有暂停功能。

---

我一直在尝试不同的组合，尝试将暂停功能插入到适用于多个按钮的脚本中，还尝试调整单按钮脚本以使其适用于多个按钮，但没有成功。 我大约一个月前才开始学习编码，所以如果我是一个新手的话。 HTML是这样的： 有两种不同的 HTML，因为它们使用不同的脚本。第二个如下所示。

<a id="play-pause-button" class="fas fa-play"></a>

第一个脚本（JavaScript，适用于单个播放/暂停按钮，但不适用于多个按钮）：

 function initAudioPlayer2() {
   audio2 = new Audio();
   audio2.src = "2b.mp3";
   playbtn2 = document.getElementById("playpausebtn2");
   playbtn2.addEventListener ("click", playPause);  
   audio2.addEventListener ("ended", myFunction);
 
   function playPause(){
        if (audio2.paused){
            audio2.play();
            playbtn2.style.background = "url(images/pause.png) no-repeat";
            } else {
            audio2.pause();
            playbtn2.style.background = "url(images/play.png) no-repeat";
            }           
   }
  audio2.addEventListener ("ended", myFunction); 
 function myFunction() {
        playbtn2.style.background = "url(images/play.png) no-repeat";
   }        
 }
 window.addEventListener("load", initAudioPlayer2);

第二个脚本（jQuery，适用于单个播放/暂停按钮，但不适用于多个按钮）：

var audio=new Audio("2e.mp3");

$('#play-pause-button').on("click",function(){
  if($(this).hasClass('fa-play'))
   {
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     audio.play();
   }
  else
   {
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio.pause();
   }
});

audio.onended = function() {
     $("#play-pause-button").removeClass('fa-pause');
     $("#play-pause-button").addClass('fa-play');
};

第三个脚本（Javascript，适用于多个按钮但没有暂停功能，只有播放功能）：

function playAudio(el) {
  var audio = document.getElementById('audio');
  var source = el.getAttribute('data-src');
  audio.src = source;
  audio.play();
}

关联的html是：

<audio id="audio"></audio>
<button onclick="playAudio(this)" data-src="2b.mp3">Button</button>

所有三个脚本都按预期工作，但它们并不能完全满足我的要求。前两个只能用于一个按钮，所以我必须为每个按钮编写一个新脚本；最后一个适用于多个按钮/多个音频，但它不显示暂停按钮，我需要一个暂停按钮。 请注意，我的网页上不需要单个音频播放器来播放不同的曲目。我已经找到了可以做到这一点的脚本，但这不适合我。我计划在我的网页上设置多个播放/暂停按钮，每个按钮播放不同的短音频。我不知道声音文件的确切数量，但会有很多。
播放/暂停按钮彼此不分离。当声音开始播放时，播放按钮被暂停按钮取代，当声音停止播放或音频暂停时，暂停按钮被播放按钮取代。

Answer 1

非常小的，希望可以理解的例子，你想要什么

示例 1：

function playAudio(x) {
    var y = x.parentElement.querySelector('audio');
    var z = x.getAttribute('class');

    if (z === 'play') {
        y.play();
        x.setAttribute('class', 'pause');
    } else {
        y.pause();
        x.setAttribute('class', 'play');
    }

    y.onended = function () {
        x.setAttribute('class', 'play');
    }
}

.play,
.pause {
    width: 100px;
    height: 100px;
    border: 0px;
}

.play {
    background: url('https://www.freeiconspng.com/uploads/video-play-icon-15.gif') no-repeat center / 100%;
}

.pause {
    background: url('https://www.freeiconspng.com/uploads/pause-icon-19.png') no-repeat center / 100%;
}

<div>
    <audio>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    </audio>
    <button onclick="playAudio(this)" class="play" type="button"></button>
</div>

<div>
    <audio>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio/mpeg">
    </audio>
    <button onclick="playAudio(this)" class="play" type="button"></button>
</div>

---

示例 2：

在本例中，如果启动了音频，而您又启动了另一个音频...所有其他音频都将停止，仅播放最后一次单击的音频。

function playAudio(x) {
    var y = x.parentElement.querySelector('audio');
    var z = x.getAttribute('class');

    if (z === 'play') {
        var allAudio = document.querySelectorAll('audio');
        for (var i = 0; i < allAudio.length; i++) {
            allAudio[i].pause();
        }

        var allButtons = document.querySelectorAll('.pause');
        if (allButtons) {
            for (var i = 0; i < allButtons.length; i++) {
                allButtons[i].setAttribute('class', 'play');
            }
        }

        y.play();
        x.setAttribute('class', 'pause');

        y.onended = function () {
            x.setAttribute('class', 'play');
        }
    } else {
        y.pause();
        x.setAttribute('class', 'play');
    }
}

.play,
.pause {
    width: 100px;
    height: 100px;
    border: 0px;
}

.play {
    background: url('https://www.freeiconspng.com/uploads/video-play-icon-15.gif') no-repeat center / 100%;
}

.pause {
    background: url('https://www.freeiconspng.com/uploads/pause-icon-19.png') no-repeat center / 100%;
}

<div>
    <audio>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    </audio>
    <button onclick="playAudio(this)" class="play" type="button"></button>
</div>

<div>
    <audio>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio/mpeg">
    </audio>
    <button onclick="playAudio(this)" class="play" type="button"></button>
</div>

Answer 2

您想要的是创建一个类并让每个玩家成为该类的实例。这样的东西应该可以工作（没有尝试过，如果发现错误，请发表评论）：

class AudioPlayer {
    audio = null;
    playBtn = null;
    
    constructor(src, elementId) {
        this.audio = new Audio();
        this.audio.src = src;
        this.playBtn = window.getElementById(elementId);
        registerEvents();
    }
    
    registerEvents() {
        this.playBtn.addEventListener("click", this.playPause);
        this.audio.addEventListener("ended", this.myFunction);
    }
    
    playPause(){
        if (this.audio.paused){
            this.audio.play();
            this.playBtn.style.background = "url(images/pause.png) no-repeat";
        } else {
            this.audio.pause();
            this.playBtn.style.background = "url(images/play.png) no-repeat";
        }
    }

    myFunction() {
        this.playBtn.style.background = "url(images/play.png) no-repeat";
    }
    
}

window.addEventListener("load", ()=> {
    var player1 = new AudioPlayer("1b.mp3", "playpausebtn1");
    var player2 = new AudioPlayer("2b.mp3", "playpausebtn2");
    var player3 = new AudioPlayer("3b.mp3", "playpausebtn3");
});