Comment créer plusieurs boutons audio sur une même page HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-03-30 12:46:47
Thèmes : script - audio - mp3 - html - javascript
Question

Bonjour,

Comment placer plusieurs boutons audio play et pause sur une même page, pour que chaque nouvelle demande annule la lecture en cours ; et cela en utilisant le code publié sur cette autre question.

Réponse

Bonjour, tout en reprenant mon code auquel vous faites référence, vous pouvez créer un conteneur via une balise <div> pour chaque bloc audio, puis utiliser une boucle for pour parcourir les différents blocs audio et ainsi mettre en pause ou en lecture :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment créer plusieurs boutons audio sur une même page HTML ?</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'>
<style>
audio {
  display: none;
}
</style>
</head>
<body>
<div class="bloc">
  <audio src="https://www.collaborativejob.com/conan/volcan.mp3"></audio>
  <button onclick="Action(this);">
    <i class="fas fa-volume-up fa-2x"></i>
  </button>
</div>
<div class="bloc">
  <audio src="https://www.collaborativejob.com/conan/sw.mp3"></audio>
  <button onclick="Action(this);">
    <i class="fas fa-volume-up fa-2x"></i>
  </button>
</div>
<div class="bloc">
  <audio src="https://www.collaborativejob.com/conan/pirates.mp3"></audio>
  <button onclick="Action(this);">
    <i class="fas fa-volume-up fa-2x"></i>
  </button>
</div>
<script>
var blocs = document.getElementsByClassName("bloc");
function Action(e)
{
  for(var i = 0; i < blocs.length; i++) 
  {
    if (blocs[i].contains(e) == false)
    {
      const contenus = blocs[i].children;
      const audio = contenus[0];
      const bouton = contenus[1];
      const icone = bouton.firstElementChild;
        if (audio.played) 
        {
          audio.pause();
          icone.classList.remove('fa-volume-mute');
          icone.classList.add('fa-volume-up');
        } 
    }
  }

  if (e.previousElementSibling.paused)
  {
    e.previousElementSibling.currentTime = 0;
    e.previousElementSibling.play();
    e.firstElementChild.classList.remove('fa-volume-up');
    e.firstElementChild.classList.add('fa-volume-mute');  
  }
  else
  {
    e.previousElementSibling.pause();
    e.firstElementChild.classList.remove('fa-volume-mute');
    e.firstElementChild.classList.add('fa-volume-up');
  }
}
</script>
</body>
</html>

Remarque : Pour qu'une musique ne redémarre pas au début lorsque l'utilisateur la met en pause et la relance, supprimez la ligne :

e.previousElementSibling.currentTime = 0;