Javascript 多行中的音频播放/暂停按钮问题

我们想让音频切换按钮播放和暂停像这个脚本。 我有15000行，我想添加不同的音频源每行音频按钮

我现在使用这个来源，如果你给了我很好的建议或新的脚本工作，我感谢你。 我只需要一次保存javascriptm，对每一行用html进行更改

如果你想查看演示

var计数=0；
document.getElementById（“切换按钮”）.onclick=function（）{
如果（计数%2==0）{
document.getElementById（“player2”）.play（）；
document.getElementById（“icons”）.classList.remove（“fa-play-circle-o”）；
document.getElementById（“图标”）.classList.add（“fa-pause-circle-o”）；
}否则{
document.getElementById（“player2”）.pause（）；
document.getElementById（“icons”）.classList.add（“fa-play-circle-o”）；
document.getElementById（“图标”）.classList.remove（“fa-pause-circle-o”）；
}
计数++；
}

.d-table{
显示：表！重要；
}
d-表细胞{
显示：表格单元格！重要；
}
w-100{
宽度：100%！重要；
}
.w-10{
宽度：8%！重要；
}
柏油{
文本对齐：左！重要；
}

HTML包含重复的

id

s。您可以用

clsss

替换

id

，并使用

.quesrySelectorAll（）

和

.forEach（）

要将

单击
事件附加到播放或暂停的每个元素
HTML是否包含重复的
id
s元素？不，亲爱的，它没有重复的id代码有什么问题？如果我将此代码添加到第一行，它的工作，如果相同的代码添加到第二行，并且具有不同的音频源，第二个按钮不起作用，你能在stacksnippets上演示这个问题吗？谢谢，它的工作，我看到了一个问题，当音频结束但暂停按钮仍然显示时，它的不显示播放按钮再次查看@ScatterInstruments，你可以将
结束
事件附加到每个

<div class=" d-table w-100">
  <p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
  <div class="d-table-cell tar w-10">
    <audio class="player" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>
    <a class="toggle-button"><i class="icons" class="fa  fa-play-circle-o fa-2x">play</i></a>
  </div>
</div>

<div class=" d-table w-100">
  <p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
  <div class="d-table-cell tar w-10">
    <audio class="player" src="http://www.mp3naat.com/download/owais-raza-qadri/mein-jashn-e-aamad-e-sarkar.mp3"></audio>
    <a class="toggle-button"><i class="icons" class="fa  fa-play-circle-o fa-2x">play</i></a>
  </div>
</div>

let toggleButtons = document.querySelectorAll('.toggle-button')
let handleToggle = e => {
  console.log(e.target);
  let audio = e.target.parentElement.previousElementSibling;
  let icon = e.target.parentElement.firstElementChild;
  if (audio.paused) {
    audio.play();
    icon.classList.remove("fa-play-circle-o");
    icon.classList.add("fa-pause-circle-o");
  } else {
    if (!audio.paused) {
      audio.pause();
      icon.classList.add("fa-play-circle-o");
      icon.classList.remove("fa-pause-circle-o");
    }
  }
}

toggleButtons.forEach(button => button.addEventListener('click', handleToggle));