HTML5 - ce qu il faut savoir sur la balise Audio

HTML5, aujourd’hui tout le monde en parle et si on se concentre sur la partie langage de balise (c’est à dire à dire tout sauf CSS3 et SVG), certaines nouveautés ont le vent en poupe, notamment la balise vidéo et la balise audio.

Quand on parle de son / musique joués dans un navigateur Web, on se rappelle tout d’abord les formats ou lecteurs d’un passé pas si éloigné (Quicktime, Real Audio, voire Windows Media). Mais aujourd’hui, la mode est plus au lecteur nécessitant un plug-in tel que Adobe Flash ou encore Microsoft Silverlight. Avec l’arrivée progressive d’HTML5 et sa balise audio, certaines choses pourraient bien changer ;-)

Informations complémentaires sur ces “vieux” formats audio du Web :

L’objectif de ce billet est faire le tour de cette nouvelle balise audio présente dans HTML5.

Pour insérer un fichier audio dans une page HTML5, il suffit d’insérer les lignes suivantes dans une page HTML5

<audio src="nomdufichier.mp3">
</audio>

Simple non ?

Maintenant il existe un ensemble de d'options permettant d'ajouter quelques fonctionnalités :

autoplay : est un attribut booléen (= qui s'applique dès que l'attribut est écrit) qui permet de démarrer la lecture audio automatiquement (ce que je n'encourage pas car personnellement je trouve cela insupportable).

ex:
<audio src="nomdufichier.mp3" autoplay>
</audio>

Référence sur les spécifications d'HTML5 (encore en Working Draft) du W3C :
https://www.w3.org/TR/html5/video.html#attr-media-autoplay

loop : est un attribut booléen qui permet de jouer en boucle le fichier audio

ex:
<audio src="nomdufichier.mp3" autoplay loop>
</audio>

Référence sur les spécifications d'HTML5 (encore en Working Draft) du W3C :
https://www.w3.org/TR/html5/video.html#attr-media-loop

controls : est un attribut booléen qui permet d'utiliser les contrôles audios classiques (lecture, pause...)

ex:
<audio src="nomdufichier.mp3" controls>
</audio>

Référence sur les spécifications d'HTML5 (encore en Working Draft) du W3C :
https://www.w3.org/TR/html5/video.html#attr-media-controls

(petit) Exemple de code :

Cette page HTML vue dans un navigateur compatible HTML5 comme ici Internet Explorer 9

Note : il est possible, au delà des contrôles natifs, de créer les vôtres en JavaScript en utilisant l'API audio.

preload : est un attribut qui permet d'indiquer au navigateur de précharger en arrière plan le fichier media. L'attribut preload peut prendre 3 valeurs :

  •   none = pas de préchargement (économise donc de la bande passante si le contenu audio n'est pas lu)
  •   auto = préchargement
  •   metadata = préchargement mais uniquement des métadonnées du fichier audio.

ex:
<audio src="nomdufichier.mp3" controls preload="none">
</audio>

Note : l'attribut autoplay peut prendre le dessus sur l'attribut preload

Référence sur les spécifications d'HTML5 (encore en Working Draft) du W3C :
https://www.w3.org/TR/html5/video.html#attr-media-preload

A noter : en fonction du navigateur Web utilisé, l'interface du lecteur audio HTML5 standard sera visuellement un peu différente

Le code précédent vu dans Google Chrome 7.0.517.44

Le même code dans Mozilla Firefox 3.6.12

On constate ici que la lecture ne fonctionne pas et que le lecteur est affiché avec une croix (gris clair sur fond gris foncé). La raison est un problème de codec audio. D'où la question suivante : Avec HTML5 quel(s)s Codec(s) audio utiliser ?

Dans les exemples ci-dessus, j'ai utilisé le .mp3 qui est un format très classique et connu de tous.

Malgré l'omniprésence du format MP3, il faut savoir que ce format audio n'est pas un format ouvert. Comme le MP3 est un format soumis à brevets, il faut pour pouvoir l'utiliser (dans un lecteur) payer des droits (ici c'est l'éditeur du lecteur comme Adobe par exemple qui paie les droits).

Informations complémentaires sur le format MP3 :

Pour des éditeurs de navigateurs comme Microsoft, Apple ou Google, le paiement de ces royalties n'est pas vraiment un soucis (que ce soit au niveau financier ou au niveau approche sur les brevets). Pour des éditeurs tels que la Fondation Mozilla, cette utilisation de format soumis à brevets et droits d'usage, cela peut gêner ne serait-ce que pour des raisons philosophiques (utilisation de format commercial dans un logiciel libre).

Aussi, au delà du MP3, il existe également d'autres formats audio comme le codec libre Vorbis (.ogg) ou encore le codec AAC qui ne sont pas soumis à brevet et donc à royalties.

Information complémentaires :

Ainsi, en fonction des éditeurs, les navigateurs ne vont pas tous supporter les mêmes formats audio.

                              MP3      Vorbis    ACC(*)
IE 9 et >                    X                      X
Google Chrome 7          X           X         X
Mozilla Firefox 3.6                     X

(*) sous IE9 avec extension .m4a ou .aac
    sous Chrome avec extension .m4a

Du coup se pose une question légitime : si tous les navigateurs ne sont pas compatibles avec un même codec, comment utiliser la balise audio d’HTML5 sans perdre la fonctionnalité sur une partie des clients connectés ?

La réponse va commencer à montrer que tout n'est pas rose dans le monde merveilleux de l'HTML5 et qu'une simple fonction peut nécessiter des efforts complémentaires.

Il va donc falloir supporter à minima 2 codecs (le MP3 et le Vorbis) et donc encoder l'ensemble des fichiers audio dans les deux formats. Puis utiliser la balise audio de la manière suivante :

<audio controls>
  <source src="monfichier.mp3">
  <source src="monfichier.ogg">
</audio>

Reprenons l'exemple précedent, cela donne :

La lecture des sources est séquentielle : si un navigateur arrive à lire le format MP3 alors il s'arrête sur la première ligne. Si au contraire le navigateur ne supporte pas le format mp3, alors il passe à la source suivante.

Du coup cette fois-ci, la lecture audio en HTML5 est possible dans Firefox

Note : au vu du tableau de compatibilité ci-dessus, le MP3 est le codec le plus supporté, il est donc logique de le mettre en premier.

Reste un question subsidiaire : Et si mon navigateur n'est pas (ou peu) compatible HTML5 et qu'il ne sait pas interpréter cette balise ? au hasard, un vieux Internet Explorer :-/

Dans ce cas, il est possible de rajouter entre les balises audio et après les sources MP3 et Vorbis, un lecteur de type Flash, Silverlight ou Javascript

David Rousset montrera un exemple de Fallback dans l'article sur la balise vidéo (à paraitre prochainemenet sur https://blogs.msdn.com/iefrance). J'en ai mis également dans les ressources complémentaires ci-dessous.

Informations complémentaires :

Ressources utiles :

 

– Stanislas Quastana -

Tags: HTML5, HTML+5, balise+audio, audio+HTML5, MP3, Vorbis, AAC, Internet+Explorer+9, Google+Chrome, Firefox