Comment créer un bouton audio lecture et pause en HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-08-11 11:05:59
Thèmes : audio - mp3 - html - css - javascript
Question

Bonjour, je cherche à personnaliser les couleurs d'un bouton play et pause pour lire un fichier audio MP3. Je sais qu'on ne peut pas personnaliser les couleurs de la balise HTML5 <audio> ; existe-il une alternative, merci.

Réponse

Vous pouvez utiliser JavaScript pour contrôler la lecture d'une balise HTML <audio>. Il vous suffit de cacher la balise avec du CSS, et de la remplacer par des icones que vous faites apparaitre ou disparaitre, selon que l'audio soit en lecture ou en pause.

Pour lancer la lecture et mettre en pause le son on utilise les deux éléments media suivants :

  • paused permet de mettre en pause.
  • play permet de lancer la lecture du média audio.

Voici comment créer un bouton audio lecture et pause en HTML ; la librairie Font Awesome est utilisée pour l'affichage des icônes au format SVG :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment créer un bouton audio lecture et pause en 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;
}
#bouton {
  color: red;
  background-color : lightgreen;
}
</style>
</head>
<body>
<audio src="https://nw.collaborativejob.com/music.mp3"></audio>
<button id="bouton">
<i class="fas fa-volume-up fa-2x"></i>
</button>
<script>
const bouton = document.querySelector("#bouton");
const icone = document.querySelector("#bouton > i");
const audio = document.querySelector("audio");
bouton.addEventListener("click", () => {
  if (audio.paused) {
audio.play();
icone.classList.remove('fa-volume-up');
icone.classList.add('fa-volume-mute');

  } else {
audio.pause();
icone.classList.remove('fa-volume-mute');
icone.classList.add('fa-volume-up');
  }
});
</script>
</body>
</html>

Démo dans le bac à codes.