Discussion :

[f6dqm1]

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 !

[gabi7756]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
Cdt

[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 !

[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é ...

[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 ...

[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