CODEWITHSUNDEEP
javascriptjqueryhtmlaudio
Scatter Instruments
Scatter Instruments

Reputation: 98

audio play/pause button problem in multiline

we want make a audio toggle button play and pause like this script. i have 15000 line and i want add every line audio button with different audio source.

enter image description here

i am using this source now if you gave me good suggestion or new script work for me thankful to you. i want only one time save javascriptm, make change in html for every line.

if you want to check demo 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>

Upvotes: 0

Views: 125

Answers (1)

guest271314
guest271314

Reputation: 1

The HTML contains duplicate ids. You can substitute clsss for id and use .quesrySelectorAll() and .forEach() to attach click event to each element which plays or pauses <audio> element that is e.target.parentElement.previousElementSibling. The CSS needs to be adjusted as to icon display and toggling.

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/

Upvotes: 1

Related Questions