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

Question

我们想要像这样的脚本那样播放和暂停音频切换按钮。 我有15000条线路，我想为每条线路的音频按钮添加不同的音频源。

如果您向我提供了很好的建议或新的脚本工作，我现在正在使用此资源，谢谢您。 我只想保存一次javascriptm，对每一行进行html更改。

如果您想查看演示visit now

 var count =0;
    document.getElementById("toggle-button").onclick = function() {

   
        if(count%2==0){
            document.getElementById("player2").play();
            document.getElementById("icons").classList.remove("fa-play-circle-o");
            document.getElementById("icons").classList.add("fa-pause-circle-o");
        }else{
            document.getElementById("player2").pause();
            document.getElementById("icons").classList.add("fa-play-circle-o");
            document.getElementById("icons").classList.remove("fa-pause-circle-o");
        }

        count++;
    }

.d-table {
  display:table !important;
}

.d-table-cell {
  display:table-cell !important;
}

.w-100 {
  width: 100% !important;
}
.w-10 {
  width: 8% !important;
}
.tar {
  text-align: left !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
  <div class="d-table-cell tar w-10">
 <audio id="player2" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>    
<a id="toggle-button"><i id="icons" class="fa  fa-play-circle-o fa-2x"></i></a>

  </div>
</div>

Answer 1

HTML包含重复的id。您可以将clsss替换为id，并使用.quesrySelectorAll()和.forEach()将click事件附加到播放或暂停<audio>元素的每个元素上e.target.parentElement.previousElementSibling。需要对CSS进行图标显示和切换的调整。

HTML

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

JavaScript

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

jsfiddle https://jsfiddle.net/8z9uq5kL/