La balise <audio> permet d’intégrer des fichiers audio dans une page web. Elle offre également des contrôles pour la lecture, la mise en pause, le réglage du volume, et permet d’ajouter plusieurs sources pour une compatibilité maximale avec les navigateurs.
Elle est souvent utilisée en combinaison avec la balise <source>, ce qui permet de fournir plusieurs formats de fichiers audio. Les navigateurs peuvent ensuite choisir un des formats proposés dans le but d'avoir une compatibilité optimale. 😉
Structure et syntaxe de la balise <audio>
Structure
Comme nous l'avons vu ensemble, la balise <audio> s'utilise en combinaison avec la balise <source>. Voici la structure que l'on retrouve généralement quand on souhaite intégrer une bande son sur une page HTML :
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
<source src="audio-file.ogg" type="audio/ogg">
Votre navigateur ne supporte pas l'élément audio.
</audio>Dans cet exemple, nous avons deux fichiers audio :
- audio-file.mp3 - Le fichier en version mp3 ;
- audio-file.ogg - Le fichier en version ogg.
Les navigateurs peuvent donc choisir la version qu'ils préférent lire. Enfin, notez bien que l'attribut controls sur la balise <audio> permet d'afficher les boutons qui contrôlent la piste audio : lecture, pause, son, etc.
Le texte "Votre navigateur ne supporte pas l'élément audio" s'affichera uniquement si le navigateur ne peut lire aucun des fichiers proposés.
Exemples d'utilisation
Lire automatiquement une banse son
Il est possible de lire automatiquement une banse son grâce à l'attribut autoplay de la balise <audio>.
<audio autoplay>
<source src="background-music.mp3" type="audio/mpeg">
Votre navigateur ne prend pas en charge cet audio.
</audio>
Lire en boucle une piste audio
Pour lire une piste audio sans interruption en boucle il est possible d'utiliser l'attribut loop.
<audio loop>
<source src="background-music.mp3" type="audio/mpeg">
Votre navigateur ne prend pas en charge cet audio.
</audio>
Combiner les attributs entre-eux
Enfin, nous pouvons combiner les attributs afin d'avoir une piste audio qui :
- Permet d'être contrôlée ;
- Se joue automatiquement ;
- Sans interruption (donc en boucle).
<audio controls autoplay loop>
<source src="background-music.mp3" type="audio/mpeg">
Votre navigateur ne prend pas en charge cet audio.
</audio>
Utilisation sans <source>
Bien que possible, il est déconseillé d’utiliser uniquement l’attribut src directement dans la balise <audio> car cela limite la compatibilité :
<audio src="audio.mp3" controls></audio>
Attributs
Attributs spécifiques
| Attribut | Description | Valeur possible |
|---|---|---|
controls | Affiche les contrôles de lecture (lecture, pause, volume, etc.). | Aucun |
autoplay | Commence la lecture automatiquement. | Aucun |
loop | Joue l’audio en boucle. | Aucun |
muted | Active le mode muet par défaut. | Aucun |
preload | Indique au navigateur comment charger l'audio. | none, metadata, auto |
src | Définit l’URL d’un fichier audio (généralement utilisé sans <source>). | Chemin vers le fichier audio |
Attributs "classiques"
La balise <audio> accepte également les attributs globaux tels que id, class, style, etc.
Recommandations
Plusieurs choses sont à considérer quand vous utilisez la balise <audio>. Voici tous nos conseils !
Utilisez plusieurs balises <sources>
Fournissez toujours plusieurs formats (comme par exemple MP3, OGG, etc.) avec des balises <source> pour garantir la lecture sur tous les navigateurs. Bien que cette tâche soit assez répétitive et chronophage, c'est quelque chose qui est très bien vu par les moteurs de recherche et qui vous permettra de toucher bien plus d'utilisateurs.
Pensez à l'accessibilité
Renseignez également un texte alternatif en cas d'incompatibilité, comme dans cet exemple que nous avons vu juste au-dessus :
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Votre navigateur ne prend pas en charge cet audio. Téléchargez-le ici : <a href="audio.mp3">audio.mp3</a>.
</audio>
N'hésitez pas à personnaliser tous les contrôles
Avec JavaScript et CSS, il est très facile de personnaliser les contrôles du lecteur audio !
Ne vous contentez pas d'utiliser uniquement l'attribut controls et n'hésitez pas à vous en passer pour contruire une expérience utilisateur sur-mesure (comme le fait Spotify).
Pensez aux performances
Par défaut toutes les pistes audio d'une page sont chargées dès qu'une page est ouverte.
Ceci n'est pas optimale pour vos performances. Pensez donc à utiliser l'attribut preload="none" pour les pistes audio qui ne sont pas nécessaire immédiatement.
Compatibilité des navigateurs
L'instruction <audio> est compatible avec tous les navigateurs.
| Elément | Google Chrome | Safari | Mozilla Firefox | Edge |
| <audio> | Oui | Oui | Oui | Oui |