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

Comments

  • Anonymous
    March 25, 2013
    Si je ne veux pas voir le lecteur en lançant mon événement de son?

  • Anonymous
    April 04, 2013
    pour cacher le lecteur, au moins sous firefox, il suffit de lui donner des dimensions 0px en largeur et hauteur à l'aide des propriétés css

  • Anonymous
    April 05, 2013
    Merci pour l'information ça complétement bien mon contenu qui commence un peu à dater :-)

  • Anonymous
    June 22, 2013
    salut j'ai un problème. mon lecteur s'affiche puis il disparaît et tt cela en une seconde

  • Anonymous
    June 23, 2013
    Oui mais avec quel navigateur ? quelle version ? quel player ?

  • Anonymous
    August 15, 2013
    Ne semble pas fonctionner en offline avec un fichier manifest, dommage que les nouvelles fonctionnalités html5 ne soient pas compatibles entre-elles...

  • Anonymous
    September 06, 2013
    Pour Priscille, je viens d'avoir le même problème de player qui apparait et disparait aussitôt. Cela se produit lorsque l'emplacement du fichier est incorrect.

  • Anonymous
    December 04, 2013
    Bonjour, après avoir testé le code :                <audio controls> <source src="musique.mp3"> <source src="musique.ogg"> </audio> je contaste qu'il fonctionne parfaitement sous IE mais sous Firefox, il affiche correctement le lecteur, on peut même mettre sur "play" mais aucun son... Une idée ? :/

  • Anonymous
    December 25, 2013
    The comment has been removed

  • Anonymous
    April 16, 2014
    cool

  • Anonymous
    July 18, 2014
    Est-ce quelqu'un sait comment on peut faire démarrer automatiquement le son à un endroit précis de la vidéo, par exemple 2minutes 31s? Ça serait étonnant que la fonctionnalité n'ait pas été prévue.

  • Anonymous
    September 30, 2014
    http://jsfiddle.net/3xa6hkr3/

    J'espère que ça t'aideras :)

  • Anonymous
    September 30, 2014
    Merci Jamal. ça met un peu de neuf dans ce vieil article :-)

  • Anonymous
    September 30, 2014
    Le plaisir est pour moi, c'est rare de pouvoir parler de code en français sur le net de nos jours :->)

    Aller un autre lien pour la route au sujet de la nouvelle API audio de l'HTML5 ! :D
    http://patorjk.com/blog/2012/07/22/tone-playing-experiment-with-html5s-web-audio-api/

  • Anonymous
    March 13, 2015
    Ce qui va pas avec HTML5, c'est que les normes ne sont jamais claires. Autant mettre un javascript, ça encombre mais ça marche partout.

  • Anonymous
    March 28, 2015
    Bonjour, comment faire pour que les lecteur ne marche pas simultanément ? Merci .

  • Anonymous
    July 04, 2015
    merci

  • Anonymous
    July 16, 2015
    Peut on déclencher le son avec le JavaScript?

  • Anonymous
    September 08, 2015
    Bonjour,

    J'utilise cette balise de façon très basique, seulement il est impossible de désactiver la lecture automatique ! Pourtant l'attribut autoplay n'est pas mentionné.