проблема с кнопкой воспроизведения / паузы в мультилинии

Question

мы хотим, чтобы звуковая кнопка переключалась и делала паузу, как этот скрипт.У меня 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>

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/