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

debugcn 发表于 Dev

散射仪

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

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

如果您想立即查看演示访问

 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>

客人271314

HTML 包含重复的ids。您也可以替换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));