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

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

一个脚本是javascript。但是，它仅适用于一个播放/暂停按钮，不适用于多个按钮

另一个脚本是jQuery。但是，它也只适用于一个播放/暂停按钮

第三个脚本是javascript。它确实适用于页面上的不同播放按钮。问题是该脚本中没有暂停功能

---

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

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

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

 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);

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');
};

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

第三个脚本（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);

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');
};

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>

按钮

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

---

播放/暂停按钮彼此不分离。当声音开始播放时，“播放”按钮将替换为“暂停”按钮，当声音停止播放或音频暂停时，“暂停”按钮将替换为“播放”按钮。

您需要的是创建一个类，并使每个播放器成为该类的实例。类似这样的方法应该有效（不要尝试，如果发现错误，请发表评论）：

---

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

示例1:

 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);

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');
};

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

功能播放音频（x）{
var y=x.parentElement.querySelector（'audio'）；
var z=x.getAttribute（'class'）；
如果（z==‘播放’）{
y、 play（）；
x、 setAttribute（'class'，'pause'）；
}否则{
y、 暂停（）；
x、 setAttribute（'class'，'play'）；
}
y、 ONENED=函数（）{
x、 setAttribute（'class'，'play'）；
}
}

.play，
.暂停{
宽度：100px；
高度：100px；
边界：0px；
}
.玩{
背景：url（'https://www.freeiconspng.com/uploads/video-play-icon-15.gif'）无重复中心/100%；
}
.暂停{
背景：url（'https://www.freeiconspng.com/uploads/pause-icon-19.png'）无重复中心/100%；
}

这里有很多信息，但有点迂腐，你实际上一个问题都没问。我试过了，但似乎不起作用。我创建了3个播放按钮：

player1player1player1

，我做的css是这样的：````播放暂停ebtn1{背景：url（Play.svg）不重复；颜色：红色；}播放暂停ebtn2{背景：url（Play.svg）不重复；颜色：红色；}``播放暂停ebtn3{背景：url（Play.svg）不重复；颜色：红色；}``我很高兴我能帮上忙：`）如果你愿意，你可以对我的答案投赞成票，并将其标记为接受答案。我刚刚看到了第二个答案。非常感谢。非常优雅的编码。第一个例子是可以理解的，除了“vary”部分，但这只是我自己。这个脚本的好处是可以将ogg文件添加到源代码中，因此可以选择播放mp3文件或ogg文件@54K查看此示例：