Comme pour la vidéo, embarquer un fichier audio dans une page HTML se fait maintenant
très facilement car des éléments ont été spécifiquement définis dans
HTML5.
Comme pour les vidéos, il existe des formats
spécifiques à utiliser car tous les navigateurs ne gérent pas tous les codecs
audio.
De plus, certains codecs qui relévent de brevets propriétaires avec
paiement de droits pour l'implémentation des algorithmes de
décompression ne seront pas supportés par tous les navigateurs.
On utilise la balise audio
pour embarquer une source audio dans du contenu. La balise doit
avoir une balise de fermeture </audio> bien que
le contenu audio ne soit pas dans le fichier HTML.
Les conteneurs (ie ~ les formats) utilisables sont les suivants :
| Navigateurs | Conteneur | Extension |
| Chrome | AAC, MP3, Vorbis, WAV | .mp4, .mp3, .ogg, .wav |
| Firefox | AAC, MP3, Vorbis, WAV | .mp4, .mp3, .ogg, .wav |
| Internet Explorer | MP3 | .mp3 |
| Edge (* avec ext. WebMedia) |
AAC, MP3, Vorbis*, WAV | .mp4, .mp3, .ogg*, .wav |
| Opera | AAC, MP3, Vorbis, WAV | .mp4, .mp3, .ogg, .wav |
Comme pour tous les éléments embarqués, il faut spécifier la localisation de la ressource sur le réseau (ie son URL). Avec l'audio, il y a 2 façons de spécifier le fichier source :
src
L'attribut src est une des solutions possibles pour
définir l'URL du
fichier audio à télécharger et à inclure dans la page. Bien sûr si
le fichier audio est situé dans un des dossiers de votre site, il
faut utiliser une URL
relative pour faire le lien.
Je vous rappelle qu'il convient d'être prudent avec les caractères utilisés pour les noms des fichiers et des dossiers qui les contiennent et je vous conseille (à nouveau) d'adopter les règles suivantes :
Quand vous allez tester le code HTML suivant, vous obtiendrez une page dans laquelle aucun lecteur d'audio ne s'affiche.
L'attribut src tout seul n'est pas
suffisant pour que le fichier audio soit lu
. On doit ajouter d'autres attributs pour la lecture à la demande
de l'utilisateur (attribut controls) ou automatique
(attribut autoplay).
Pour que l'audio soit fonctionnel il faut ajouter
l'attribut controls
qui va forcer l'affichage d'une barre d'icônes permettant de
contrôler différentes actions : play, pause, début, etc.
controls est un attribut booléen : c'est la présence
de l'attribut qui définit sa prise en compte. Si une valeur est
affectée elle n'aura aucune influence. Une erreur
commune est d'écrire controls="false" : la barre de
contrôle sera affichée malgré la valeur false.
Avec HTML seul on ne peut pas agir sur cette barre de contrôle. Il n'est pas possible de modifier sa position, sa couleur, la forme ou la présence de tel ou tel bouton. Chaque navigateur l'affiche comme il veut, à l'endroit où il veut, et celà peut changer d'une version à une autre, ou même selon les dimensions de la vidéo.
L'attribut autoplay est un attribut booléen qui
déclenche la lecture automatique du fichier audio dès qu'elle est
possible.
Si vous ne voulez pas que l'utilisateur ait le contrôle de l'audio
mais que vous voulez que le fichier soit lu malgré tout, vous
pouvez ne pas mettre d'attribut controls et uniquement
un attribut autoplay.
L'attribut loop est un attribut booléen qui déclenche
la lecture en boucle du fichier audio.
L'attribut preload définit comment sera chargé le
fichier audio si on ne veut pas utiliser le système mis en place
par le navigateur pour la gestion des chargements.
L'attribut preload peut avoir 3 valeurs.
preload="none" : le téléchargement du fichier
audio commencera seulement quand l'utilisateur démarrera la
lecture.
preload="auto" : le téléchargement du fichier
audio commencera dès que la page sera affichée. Celà peut conduire
à surcharger le réseau et le serveur si le fichier est de grande
taille et pas écouté.preload="metadata" : le navigateur va
seulement télécharger les métadonnées du fichier audio comme sa
durée, sa taille, etc.L'élément source permet de définir plusieurs sources audio, et ainsi de pallier l'absence de support de certains formats par le navigateur.
Le travail de préparation est plus long car si on veut être complet, il faut encoder la même source audio dans 3 formats différents et fournir un fichier MP4, un fichier MP3 et un fichier Ogg (cf les conteneurs vidéo et audio).
Entre les balises <audio> et </audio> on placera autant
d'éléments source
que l'on veut fournir de formats différents.
La localisation de la ressource sur le réseaut est fait avec l'URL donnée comme valeur de
l'attribut src
Le navigateur téléchargera la 1ère source de la liste qu'il sait
décoder et lire.
Pour faire ce choix, il se base sur le type MIME
définit par l'attribut type.
Une particularité est de pouvoir préciser le codec utilisé pour la compression. La syntaxe est un peu embarassante car il y a un mélange à faire entre des guillemets simples et des guillemets doubles.