javascript - 如何为单个网页上的多个播放/暂停按钮制作单个 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>