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 :
- Quicktime : https://en.wikipedia.org/wiki/QuickTime
- Windows Media Player : https://msdn.microsoft.com/en-us/library/ff819508(v=VS.85).aspx
- Real Audio : http://fr.wikipedia.org/wiki/RealAudio
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 :
- MP3
https://en.wikipedia.org/wiki/MP3#Licensing_and_patent_issues - MP3 licence for PC Software Applications
https://mp3licensing.com/royalty/software.html
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 :
- Advanced Audio Coding (AAC)
https://en.wikipedia.org/wiki/Advanced_Audio_Coding
https://fr.wikipedia.org/wiki/Advanced_Audio_Coding - Vorbis
https://en.wikipedia.org/wiki/Vorbis
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 :
- Les spécifications d'HTML5 du W3C (actuellement encore en Working Draft) sur la balise audio sont disponibles à l'adresse suivante :
https://www.w3.org/TR/html5/video.html#audio
Ressources utiles :
- Encodeur Open Source:Audacity
https://audacity.sourceforge.net intègre en standard les outils pour exporter au format Ogg Vorbis (.ogg) ou MP3 (.mp3)
- FFMPEG : Outil en ligne de commandes pour convertir des fichiers audio ou vidéo
https://ffmpeg.org/about.html - Exemple de lecteur (vidéo et audio) compatible tout navigateurs (avec mécanismes de fallback)
https://static.etianen.com/html5media/
https://github.com/etianen/html5media/ - jQuery audio player
https://www.happyworm.com/jquery/jplayer
https://www.happyworm.com/jquery/jplayer/latest/demo-01.htm
– Stanislas Quastana -
Tags: HTML5, HTML+5, balise+audio, audio+HTML5, MP3, Vorbis, AAC, Internet+Explorer+9, Google+Chrome, Firefox