play pause button to toggle button

Question

please help me, play/pause button to one toggle button mean one time click audio is play second time click then audio is pause with icon change. thanks in advance

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

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

.w-100 {
  width: 100% !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 onclick="document.getElementById('player2').play()"><i  class="fa fa-play-circle-o fa-2x"></i></a>
<a onclick="document.getElementById('player2').pause()"><i  class="fa fa-pause-circle-o fa-2x"></i></a> 
  </div>
</div>

You can check this. https://stackoverflow.com/questions/9437228/html5-check-if-audio-is-playing — Bijay Yadav, Feb 01 '19 at 03:47
https://stackoverflow.com/questions/9437228/html5-check-if-audio-is-playing — Bijay Yadav, Feb 01 '19 at 03:47

ellipsis · Accepted Answer · 2019-02-01T04:02:51.490

1

Try this. It will toggle as well as play and pause on click

var play = false;
var audio=document.getElementById('player2');
function toggle() {
  if (play) {
    audio.pause()
  } else {
    audio.play();
  }
};
audio.onplaying = function() {
  play = true;
};
audio.onpause = function() {
  play = false;
};
$(".w-10 >a> #a").click(function(){$(this).toggleClass("fa-play-circle-o fa-pause-circle-o")})

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

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

.w-100 {
  width: 100% !important;
}


.tar {
  text-align: left !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 onclick="toggle()"><i id="a" class="fa fa-play-circle-o fa-2x"></i></a>
  </div>
</div>

edited Feb 01 '19 at 04:02

answered Feb 01 '19 at 03:47

ellipsis

12,049
2
17
33

when we add 6-7 audio in a page then we change the audio source every audio but when click on play then play only one audio on every button seee the example http://islahemuashra.com/?page_id=5 – Scatter Instruments Feb 01 '19 at 03:58
check edits, place every audio element in separate div. it will work – ellipsis Feb 01 '19 at 04:03
can you gave a example – Scatter Instruments Feb 01 '19 at 04:05
here the audio element is place inside the div with class w-10 so the selector used is `.w-10 >a> #a`. When it inside div with class w-11 the selector will be `.w-11 >a> #a` so on and so forth – ellipsis Feb 01 '19 at 04:09
no worked, i have 15000 audios, its mean i have to add 15000 line in java script? – Scatter Instruments Feb 01 '19 at 04:19

score 1 · Answer 2 · answered Feb 01 '19 at 03:57

change your html like this

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

and javascript

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

    console.log("hello");
        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++;
    }

</script>

when we add 6-7 audio in a page then we change the audio source every audio but when click on play then play only one audio on every button seee the example islahemuashra.com/?page_id=5 — Scatter Instruments, Feb 01 '19 at 04:03

play pause button to toggle button

2 Answers2