How to stop one audio player from playing when I click another - javascript

Question

I am creatinga page specifically for an ipad.

I have 12 audio players on a page. They are all working fine but if you click a second player the first one continues to play. I've seen this question asked before but none of the answers are specific to my code.

<script>

function EvalSound(soundobj) {
 var thissound=document.getElementById(soundobj);
  if (thissound.paused)
            thissound.play();
    else
        thissound.pause();
        thissound.currentTime = 0;
}
</script>

The players themselves:

<a href="card3_ipad.php?card=funny" onClick="EvalSound('song1'); return true;"
    target="player"><IMG SRC="images/funnytab.gif" BORDER=0 WIDTH=128 HEIGHT=29>
</A>    
<audio id="song1" style="display: none; width: 0px; height: 0px;"
src="mp3examples/funnyauto.mp3" controls preload="auto" autobuffer>

then another player is:

<a href="card3_ipad.php?card=country" onClick="EvalSound('song2'); return true;"
    target="player"><IMG SRC="images/countrytab.gif" BORDER=0 WIDTH=128 HEIGHT=29>
</A>    
<audio id="song2" style="display: none; width: 0px; height: 0px;"
src="mp3examples/countryauto.mp3" controls preload="auto" autobuffer>

Any help would be massively appreciated!

Cheers

Tom

Anoop · Answer 1 · 2013-05-03T15:38:24.713

2

use another variable which hold current active player

<script>
var currentPlayer;
function EvalSound(soundobj) {

 var thissound=document.getElementById(soundobj);
 if(currentPlayer  && currentPlayer != thissound) {
      currentPlayer.pause(); 
 }
 if (thissound.paused)
            thissound.play();
    else
        thissound.pause();
        thissound.currentTime = 0;
         currentPlayer = thissound;
}
</script>

edited May 03 '13 at 15:38

answered May 03 '13 at 15:23

Anoop

23,044
10
62
76

1

Thankyou for your very speedy response! Unfortunately nothing plays at all now :( – Tom Williams May 03 '13 at 15:32
1

Thankyou again :) It almost works this time! It doesn't work if the player is being used for the first time. If it has been started once then the code works. If it is the first time the song is being played then it doesn't stop the previous player. – Tom Williams May 03 '13 at 15:44
1

if You start you first player by calling EvalSound then it would work. but if you start it from other place then you have to set currentPlayer to current player. – Anoop May 03 '13 at 15:50
1

I do start the first player by calling EvalSound but when you start the next player both songs play together. You have to pause both songs after that the code works and they stop each other. – Tom Williams May 03 '13 at 15:56
I've just tested it on a browser on a PC and it's perfect. The problem only occurs on an ipad2. I don't have an ipad3 to test it on. Any ideas? – Tom Williams May 03 '13 at 17:11
Hi Sushil - Just checked, no it's not working properly in Safari. It is in Chrome. – Tom Williams May 03 '13 at 17:40
Thank you @Anoop ! It's working for me in Chrome 66.0 on a Macbook. I think your solution is quite a bit more elegant than this other Javascript+imagemap approach that I was struggling to get working -- https://www.hywel.me/jekyll/static/site/2015/11/28/toggle-play-and-pause-on-multiple-audio-files-by-clicking-areas-on-an-image-map.html – Scott Veirs Jun 05 '18 at 23:58

How to stop one audio player from playing when I click another - javascript

1 Answers1

Linked