Les éléments audio peuvent être n'importe quoi allant du son à la musique en passant par le podcast de base.
Pour insérer un élément audio on va utiliser une nouvelle balise, la balise <audio>. De même que pour la balise <img /> on va ajouter un attribut "src" et y indiquer le fichier source qui peut être dans n'importe lequel des formats audio que nous avons vu précédemment.
Voici un exemple de code audio :
<audio src="audio.mp3"></audio>
Bon si vous lancez la page vous vous rendrez compte que rien ne se passe. Ce code indique seulement au client (le navigateur du visiteur) qu'il y a une fichier audio à télécharger.
Pour pouvoir écouter ce fichier audio il faut ajouter quelques attributs à la balise.
Voici quelques attributs que vous pouvez ajouter à votre balise :
controls : pour ajouter un module de navigation avec boutons "lecture", "pause", "stop" ; cet attribut ne prend aucune valeur
loop : pour que la musique soit jouée en boucle
autoplay : la musique commence à jouer dès que l'on arrive sur la page
preload : indiquer si la musique doit être préchargée ou non
width : modifier la taille du lecteur
Pourquoi est-ce que l'on ne met rien entre les balises d'ouverture et de fermeture ?
En fait si on met du texte entre la balise d'ouverture et la balise de fermeture, il ne s'affichera normalement pas... sauf si le navigateur du visiteur ne peut pas lire le fichier.
On peut donc y placer un message d'erreur comme ceci :
<audio src="musique.mp3" controls>Il faut mettre à jour votre navigateur !</audio>
Ce message d'erreur ne s'affichera que si le fichier audio ne peut pas se lancer.
Une dernière petite astuce pour la route, il est possible d'inclure deux fichiers audios sous deux formats différents.
Pour cela on ne va pas utiliser d'attribut "src" mais à la place on va ajouter dans la balise audio des balises <source>.