How to stop HTML5 Audio Player automaticly when next Player starts

0
votes

i dont have so much knowledge about JavaScript.

I have created some websites with some html5 player. Now my Question, when a player plays a song it doesn´t stopp when the next player is playing a song. at the moment i stop the player with a "click". I use this code:

<button id="play<?= $i ?>" class="btn-icon-play" onclick="document.getElementById('player<?= $i ?>').play()"></button>
<button id="stop<?= $i ?>" class="btn-icon-stop hidden" onclick="document.getElementById('player<?= $i ?>').pause()"></button>
<audio id="player<?= $i ?>" src="<?= $music['url'] ?>"></audio>

Can somebody help me?

1
javascripthtmlhtml5-audio

1 Answers

0
votes

Add this code in the play button. It will pause all videos at once and then play the audio of choice.

var audioList = document.getElementsByTagName('audio');
for(var i = 0; i < audioList.length; i++){
    if(audioList[i].tagName){
        audioList[i].pause();
    }
}

Your play button will be something like this

<button id="play<?= $i ?>" class="btn-icon-play" onclick="var audioList = document.getElementsByTagName('audio');for(var i = 0; i < audioList.length; i++){if(audioList[i].tagName){audioList[i].pause();}}document.getElementById('player<?= $i ?>').play()"></button>

I Think it will work for your specific needs.

But it's not a good practice to put javascrit inline tags. You must have a separete file with your javascript code.