La balise audio permet d'ajouter un son, une musique ou un enregistrement directement dans une page HTML5. Vous allez voir comment l'écrire, quels formats utiliser et quels attributs ajouter pour contrôler la lecture.
Pourquoi utiliser une balise audio plutôt qu'un service en ligne ?
Quand vous utilisez un service en ligne, comme une plateforme de streaming ou un lecteur externe, vous intégrez souvent un bloc déjà prêt. C'est pratique, mais vous ne contrôlez pas toujours complètement son apparence ni son comportement.
Avec la balise <audio>, vous gardez la main sur le fichier lu, sur les réglages de lecture et sur l'endroit où le lecteur apparaît dans votre page. C'est souvent plus simple quand vous voulez ajouter un petit son d'ambiance, un extrait musical ou une piste de démonstration.
En revanche, héberger vos propres fichiers audio demande un peu de vigilance. Il faut penser au poids du fichier, aux formats acceptés et au confort de lecture pour l'utilisateur.
Introduction à la balise audio
La balise <audio> fonctionne comme la balise <video>. Elle possède une balise ouvrante, une balise fermante et, entre les deux, on place en général une ou plusieurs balises <source>.
<audio>
<source src="../images/show_me_what_you_got.mp3" type="audio/mpeg" />
Votre navigateur ne prend pas en charge la lecture audio HTML5.
</audio>
La balise <source> indique où se trouve le fichier audio et de quel type il s'agit. Le texte placé après les sources sert de contenu de secours si le navigateur ne peut pas lire l'audio.
À ce stade, votre balise existe bien, mais elle n'affiche pas encore forcément de boutons utiles. Pour rendre la lecture vraiment pratique, il faut ajouter certains attributs.
Ici, le lecteur charge réellement le fichier mp3.
Les différents formats audio acceptés
Le format le plus courant pour le web est le .mp3. C'est souvent celui que l'on choisit en premier, car il est largement reconnu par les navigateurs.
Il existe aussi d'autres formats audio, par exemple :
-
.mp3 -
.ogg -
.wav
Le format MP3
C'est le format le plus simple à utiliser dans un cours ou sur un site classique. Il est largement pris en charge, il reste léger dans beaucoup de cas et il convient très bien pour la musique, la voix ou de petits extraits sonores.
Le format Ogg
C'est un format ouvert, souvent utilisé avec les codecs Vorbis ou Opus. Il peut offrir une très bonne qualité, mais il reste moins courant dans les projets simples. Quand on veut aller vite et viser la compatibilité la plus tranquille possible, le MP3 reste souvent plus pratique.
Le format WAV
Le format WAV est surtout intéressant quand on veut un son peu compressé, voire non compressé. Son principal inconvénient est son poids : les fichiers deviennent vite volumineux. Pour le web, ce n'est donc pas toujours le format le plus confortable à utiliser.
Compatibilité des formats sur les différents navigateurs
Compatibilité du MP3 : le MP3 est compatible avec tous les grands navigateurs modernes, notamment Chrome, Edge, Safari, Firefox et leurs versions mobiles. C'est la solution la plus sûre pour un lecteur audio HTML classique.
Compatibilité du Ogg : le format Ogg est globalement bien pris en charge par les navigateurs modernes. Il fonctionne notamment dans Firefox, Chrome, Edge et Safari récents, sur ordinateur comme sur mobile, mais il reste moins universel dans les habitudes de production que le MP3.
Compatibilité du WAV : le format WAV est lui aussi pris en charge par les grands navigateurs modernes. En revanche, sa compatibilité dépend parfois davantage du codec audio exact utilisé dans le fichier. Pour un débutant, cela en fait un format un peu moins simple à manipuler que le MP3.
Si vous voulez améliorer la compatibilité, vous pouvez proposer plusieurs fichiers avec plusieurs balises <source>. Le navigateur utilisera la première source qu'il sait lire.
<audio controls>
<source src="../images/show_me_what_you_got.mp3" type="audio/mpeg" />
<source src="sons/extrait.ogg" type="audio/ogg" />
<source src="sons/extrait.wav" type="audio/wav" />
Votre navigateur ne prend pas en charge la lecture audio HTML5.
</audio>
Attention ! Il ne suffit pas de changer l'extension du fichier. L'attribut type doit lui aussi correspondre au vrai format audio proposé.
Afficher les boutons de contrôle
Pour que l'utilisateur puisse lancer la lecture, mettre en pause ou se déplacer dans le son, il faut ajouter l'attribut controls.
<audio controls>
<source src="../images/show_me_what_you_got.mp3" type="audio/mpeg" />
</audio>
Cet attribut n'a pas besoin de valeur particulière. Sa simple présence suffit.
Sans controls, l'audio peut être chargé dans la page, mais l'utilisateur ne voit pas les boutons classiques du lecteur. Pour un cours débutant, c'est donc souvent le premier attribut à retenir.
L'attribut autoplay pour lire un son automatiquement
L'attribut autoplay demande au navigateur de lancer la lecture dès que possible, sans attendre un clic de l'utilisateur.
<audio autoplay>
<source src="../images/show_me_what_you_got.mp3" type="audio/mpeg" />
</audio>
Sur le papier, c'est simple. En pratique, beaucoup de navigateurs modernes bloquent la lecture automatique quand le son est audible. Ils le font pour éviter qu'une page se mette à jouer du son sans prévenir.
Attention ! Même si autoplay existe, il faut l'utiliser avec prudence. Un son qui démarre tout seul peut vite devenir gênant pour la personne qui visite votre page.
Lire en boucle un son avec l'attribut loop
Si vous voulez que le fichier audio recommence automatiquement à la fin, il faut ajouter l'attribut loop.
<audio controls loop>
<source src="../images/show_me_what_you_got.mp3" type="audio/mpeg" />
</audio>
Cet attribut peut être utile pour une ambiance sonore répétitive ou pour une courte boucle de démonstration. Il faut simplement penser à l'effet produit sur le confort de lecture.
Muter le son avec muted
Pour démarrer un lecteur en coupant le son, on utilise l'attribut muted.
<audio controls muted>
<source src="../images/show_me_what_you_got.mp3" type="audio/mpeg" />
</audio>
On entend parfois parler de mute, mais en HTML le nom exact de l'attribut est muted. C'est ce mot qu'il faut écrire dans votre balise.
Cet attribut peut aussi être utile si vous faites des essais avec autoplay, car certains navigateurs acceptent plus facilement une lecture automatique quand le son est coupé.
Gestion du préchargement du fichier audio avec preload
L'attribut preload sert à indiquer au navigateur comment préparer le fichier audio avant que l'utilisateur clique sur lecture.
Les valeurs les plus courantes sont :
-
none: ne rien charger à l'avance -
metadata: charger seulement les informations de base -
auto: laisser le navigateur charger davantage si nécessaire
<audio controls preload="metadata">
<source src="../images/show_me_what_you_got.mp3" type="audio/mpeg" />
</audio>
Si votre fichier est lourd, un réglage trop agressif peut ralentir inutilement le chargement de la page. À l'inverse, si le son est très court et important pour votre interface, un préchargement plus souple peut être acceptable.
Retenez surtout ceci : pour intégrer proprement un son dans une page, vous avez souvent besoin d'une balise <audio>, d'au moins une source .mp3 bien déclarée, de controls pour afficher le lecteur et d'attributs comme loop, muted ou preload seulement quand ils répondent à un vrai besoin.