HTML5 Audio tag "exclusif"

Version imprimable

05/05/2025, 09h49
f6dqm1

HTML5 Audio tag "exclusif"

Bonjour. Dans une page Web en HTML5, j'ai plusieurs audio tags associés à différents boutons pour jouer divers fichiers mp3.
Comment faire pour bloquer ou mettre en file d'attente les fichiers audio lorsque l'utilisateur appuie sur un bouton alors qu'un fichier audio précédent est en cours de jeu et n'est pas terminé ? Dans mon projet actuellement, les fichiers audio se superposent et ce n'est pas top !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<audio controls src="audio1.mp3"></audio>
<audio controls src="audio2.mp3"></audio>
<audio controls src="audio3.mp3"></audio>
 
<script>
  const audios = document.querySelectorAll('audio');
 
  audios.forEach(audio => {
    audio.addEventListener('play', () => {
      audios.forEach(otherAudio => {
        if (otherAudio !== audio) {
          otherAudio.pause();
        }
      });
    });
  });
</script>

Bonjour,
J'ai pas test mais un truc du genre ?
Je sais pas si il y plus opti par contre :aie:
Cdt

05/05/2025, 10h15
f6dqm1

Merci pour le petit bout de code.
J'ai essayé et il y a du mieux. Les fichiers ne se superposent plus mais le fichier précédent en cours de jeu est stoppé et remplacé par celui qui vient d'être lancé par appui sur un autre bouton (ou audio tag).
Je préférerais que le fichier en cours de jeu se termine et que l'appui sur un autre bouton soit "sans effet", soit "mémorisé" pour que le nouveau fichier démarre après la fin du fichier précédent.
Mais ce que vous proposez est déjà pas mal !!! C'est moins le bazar qu'avant !
05/05/2025, 10h24
f6dqm1

Autre effet que je découvre avec votre bout de code : le fichier est stoppé et remplacé par le suivant; et si l'on essaie de rejouer le fichier n-1 (celui qui a été stoppé), il repart là où il s'était arrêté ...
05/05/2025, 10h38
gabi7756

Tu fais une file d'attente sinon , dès que tu cliques , ajoute la balise audio tag ( son id ) dans un tableau. Et quand un de tes audio est fini :
https://developer.mozilla.org/en-US/...nt/ended_event

Tu redéclenches le deuxième audio ?

Je sais pas comment c'est fait autrement ...
05/05/2025, 12h42
f6dqm1

En ajoutant derrière le .pause() un .load(), cela fonctionne de façon satisfaisante.
Ainsi, le fichier en cours est arrêté et rechargé. Si l'on re-clique le bouton après arrêt, il repart au début.
Si l'on clique un nouveau bouton, le fichier en cours s'arrête et le nouveau prend le relais.
Ça me va comme cela.
Merci pour l'aide