<audio>

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 :

1. Permet d'être contrôlée ;
2. Se joue automatiquement ;
3. 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

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.