superposition audio controls

19 juil. 2018, 23:01

Bonjour,
sur une page je met en écoute différents morceaux de music avec :

            <audio controls>
                        <source src="/mp3/guit.mp3" type="audio/mpeg">
                        Your browser does not support the audio element.
                        </audio>
                        
                        
                        <audio controls>
                        <source src="/mp3/pian.mp3" type="audio/mpeg">
                        Your browser does not support the audio element.
                        </audio>
                        
                        ...

L’écoute fonctionne bien mais si l'internaute clique sur 2 lecteurs en même temps on a les 2 sons qui sortent...
Existe-il une option pour couper le 1er son lorsqu'un autre sons est lancé afin d’évité la superposition des sons ?

20 juil. 2018, 14:27

Bonjour,

Il n'existe pas une option particulière mais ça peut se faire très facilement en javascript avec le code suivant :

Code : Tout sélectionner

<script>
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);
</script>

Démo : https://jsfiddle.net/rgxu0kye/7/

superposition audio controls

Qui est en ligne