Search code examples
javascripthtmlaudio

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


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.


Solution

  • 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);