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.

### L'élément <audio>

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 :

- avec un attribut `src`
- avec un ou plusieurs éléments source

Exemple : audio avec attribut src
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Audio</title> </head> <body> <audio src="audio/dv.mp3" controls></audio> </body> </html>
Exemple : audio avec éléments source
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Audio avec éléments source</title> </head> <body> <audio controls> <source src="audio/dv.mp3" type="audio/mpeg"> <source src="audio/dv.mp4" type="audio/mp4"> <source src="audio/dv.ogg" type="audio/ogg"> </audio> </body> </html>

#### L'attribut 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 :

- les noms de fichier et de dossiers étant sensibles à la casse, utilisez uniquement des minuscules,
- utilisez uniquement les caractères aplhabétiques non accentués (de a à z), des chiffres (de 0 à 9), le caractère -, le caractère _ et le caractère .
- n'utilisez jamais d'espaces.

Quand vous allez tester le code HTML suivant, vous obtiendrez une page dans laquelle aucun lecteur d'audio ne s'affiche.

Exemple : audio
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Audio</title> </head> <body> <audio src="audio/dv.mp3"></audio> <p>La forme du lecteur audio n'est pas modifiable par HTML.</p> </body> </html>

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`).

#### L'attribut controls

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.

Exemple : audio avec contrôles
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Audio avec contrôles</title> </head> <body> <audio src="audio/dv.mp3" controls></audio> <p>La forme du lecteur audio n'est pas modifiable par HTML.</p> </body> </html>

#### L'attribut autoplay

L'attribut `autoplay` est un attribut booléen qui déclenche la lecture automatique du fichier audio dès qu'elle est possible.

Exemple : lecture automatique
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Lecture automatique</title> </head> <body> <audio src="audio/dv.mp3" controls autoplay></audio> <p>La forme du lecteur audio n'est pas modifiable par HTML.</p> </body> </html>

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

L'attribut `loop` est un attribut booléen qui déclenche la lecture en boucle du fichier audio.

Exemple : lecture en boucle
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Lecture en boucle</title> </head> <body> <audio src="audio/tel.mp3" controls autoplay loop></audio> <p>La forme du lecteur audio n'est pas modifiable par HTML.</p> </body> </html>

#### L'attribut preload

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.

### Sources multiples

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`.

Exemple : sources audio multiples
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Sources audio multiples</title> </head> <body> <audio controls> <source src="audio/dv.mp3" type="audio/mpeg"> <source src="audio/dv.mp4" type="audio/mp4"> <source src="audio/dv.ogg" type="audio/ogg"> </audio> <p>La forme du lecteur audio n'est pas modifiable par HTML.</p> </body> </html>

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.

Exemple : sources audio multiples
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Sources audio multiples</title> </head> <body> <audio controls> <source src="audio/dv.mp3" type='audio/mpeg; codecs="mp3"'> <source src="audio/dv.mp4" type='audio/mp4; codecs="mp4a.40.5"'> <source src="audio/dv.ogg" type='audio/ogg; codecs="vorbis"'> </audio> <p>La forme du lecteur audio n'est pas modifiable par HTML.</p> </body> </html>

Vidéo et audio, codecs et conteneurs lire aussi tu dois.