multiple audio html : auto stop other when current is playing with javascript

Question

I have 10 audio players with simple html audio tags on a html5 page. No jquery, no special audio js plugins, etc...

Does anyone has a simple script in js to pause all other players when the current player is playing ?

I don't want to use js plugins because i want to keep a simple audio html code.

Answer 1

you can use event delegation. Simply listen to the play event in the capturing phase and then pause all video file, but not the target one:

document.addEventListener('play', function(e){     var audios = document.getElementsByTagName('audio');     for(var i = 0, len = audios.length; i < len;i++){         if(audios[i] != e.target){             audios[i].pause();         }     } }, true); 

Answer 2

Instead of looping over all audio tags on a page and pausing them, you can store a reference to the currently playing element, and have only that one pause when playing another.

document.addEventListener("play", function(evt) {     if(this.$AudioPlaying && this.$AudioPlaying !== evt.target) {         this.$AudioPlaying.pause();     }     this.$AudioPlaying = evt.target; }, true);