La balise <audio> Audio

Pour jouer un son en HTML5, on dispose de la balise <audio>.

Il est possible de l’utiliser en la paramétrant pour qu’elle affiche des boutons de contrôle pour jouer, mettre en pause, arrêter ou encore changer le volume.

La balise <audio> possède une propriété preload permettant le chargement automatique du son. Il est possible également d’ajouter le paramètre autoplay pour que le son commence automatiquement au chargement de la page, ou encore le paramètre loop pour que le son soit joué en boucle.

<audio preload="auto" src="../audio/JohnDunbarTheme.mp3" 
autoplay loop ></audio>

Si cela peut être intéressant d’avoir quelques sons au passage de la souris sur un bouton par exemple, l’utilisateur n’appréciera pas forcement d’avoir une musique qui se met en route sans son accord en arrivant sur le site.

Pour afficher les boutons de contrôle du son, il suffit d’ajouter le booléen controls.

<audio preload="auto" src="../audio/JohnDunbarTheme.mp3" controls >
</audio>

L’exemple qui suit permet de jouer un son en personnalisant le lecteur audio.

<audio preload="auto" id="duSon"> 
  <source src="../audio/JohnDunbarTheme.ogg" type="audio/ogg" /> 
  <source src="../audio/JohnDunbarTheme.mp3" type="audio/mpeg" /> 
  <source ...