superposition audio controls

Mammouth du PHP | 607 Messages

19 juil. 2018, 23:01

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

Code : Tout sélectionner

<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 ?

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 7783 Messages

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>

:arrow: Démo : https://jsfiddle.net/rgxu0kye/7/
Quand tout le reste a échoué, lisez le mode d'emploi...