Comme nous l’avons auparavant évoqué à travers l’article HTML5 Rich Media – 1ere partie/, HTML5 propose aujourd’hui une alternative aux plugins propriétaires ‘Flash’ ou ‘SilverLight’.
Dans cette seconde partie consacrée aux éléments dits ‘Rich Media’, nous allons nous pencher sur l’élément audio, détailler ces attributs et aussi les contraintes pesant sur son utilisation.
AUDIO
Etat des lieux
Cela fait déjà quelques années que le mp3 s’est imposé sur le marché comme le standard des formats audio.
Mais fournir à l’internaute la possibilité d’écouter un son requiert tout de même une technologie propriétaire : Adobe Flash est sur ce point là le vainqueur.
Aujourd’hui, HTML5 se lance dans la bataille. Voyons ce qu’il propose.
L’élément audio
L’implémentation proprement dite de l’élément audio est aisée :
<audio src="fanfare.mp3"></audio>
Les attributs permettant de paramétrer cette implémentation sont :
autoplay
L’attribut autoplay permet la lecture automatique du fichier son. C’est un attribut booléen, qui ne prend aucune valeur. C’est sa présence ou son absence qui détermine la lecture automatique, il n’y a pas de valeur booléenne true ou false à lui adjoindre.
loop
Si, non content d’avoir lancé un morceau sans demander l’avis de l’utilisateur, vous voulez réellement lui pourrir la vie, vous pouvez ajouter l’attribut loop, qui fera tourner le fichier son en boucle. C’est aussi un attribut booléen.
<audio src="fanfare.mp3" autoplay loop ></audio>
controls
A l’inverse, l’attribut booléen controls donne la main à l’internaute sur le fichier son en forçant le navigateur à fournir des éléments basiques de contrôle, que sont la pause, le lancement et l’ajustement du volume.
Si l’interface native ne vous convient pas, vous pouvez créer la vôtre en passant par l’API Audio et JavaScript. Les méthodes play, pause, les propriétés volumes vous sont accessibles.
Voici un exemple simple :
<audio id="player" src="fanfare.mp3"><audio>
<div>
<button onclick="document.getElementById('player').play()">;Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementByld('player').volume += 0.1"> Vol + </button>
<button onclick="document.getElementById('player').volume -= 0.1"> Vol - </button>
<div>
preload
L’attribut non booléen preload permet d’informer le navigateur s’il doit charger le fichier son en tâche de fond même s’il ne doit pas être joué immédiatement. Il a trois valeurs possibles :
– none : le préchargement ne doit pas s’effectuer lors du chargement de la page,
– auto : le préchargement en totalité est automatique,
– metadata : seules les metadatas sont chargées lors du chargement de la page.
Attention à son utilisation cependant car si vous désirez préchargez moults fichiers son, vous risquez de saturer la bande passante de votre utilisateur.
<audio src="fanfare.mp3" preload='none' ></audio>
Nota bene : preload remplace l’attribut booléen autobuffering car Safari ne tenait aucunement compte de celui-ci et le développeur ne possédait aucun moyen d’empêcher Safari de ne pas précharger le fichier son.
Les contraintes de l’élément audio
La perfection étant rarement atteinte, l’élément autobuffering n’échappe pas à la règle car il subit une grosse contrainte, due, non pas à une spécification bancale, mais aux formats existants pour les fichiers son.
Comme dit précédemment, le mp3 s’est universellement imposé, mais le hic est que ce n’est pas un format libre !
Il faut donc payer une patente pour utiliser ce format.
Si ceci ne pose pas de problème aux acteurs majeurs que sont Adobe et Apple, on imagine bien que ce n’est pas, si j’ose dire, la même musique, pour des petites sociétés ou bien pour des groupes open-source…
Ainsi, Apple Safari joue sans encombre un fichier mp3, ce qui n’est pas le cas de Mozilla Firefox.
L’alternative est donc d’utiliser un ou plusieurs autres formats, gratuits, pour passer outre ce problème de droits. Le format Ogg Vorbis est libre de droits, chouette, Mozilla peut donc se l’offrir !
Oui, mais bon, Safari ne le lit pas…
Fichtre, ça commence à sentir l’usine à gaz.
Effectivement. Mais heureusement nous n’avons pas à faire un choix unique et donc réducteur de tel ou tel format de fichier son : il faudra juste avoir le courage d’en implémenter plusieurs !
Au lieu d’utiliser l’attribut src pour spécifier la source dans audio, utilisons le plutôt dans l’élément source !
De plus, précisons le type afin d’aider le navigateur à faire son choix.
<audio controls> <source src='fanfare.mp3' type='audio/mpeg' > <source src='fanfare.ogg' type='audio/ogg' > </audio >
Nota bene :\r\nCet élément étant dit ‘standalone’, n’omettez pas, si vous développez en XHTML de préciser le slash de sortie de balise (<source…….. / >).
Et IE dans tout ça ?
Ce n’est qu’à partir de la version Internet Explorer 9 que la balise audio est interprétée, aussi est-il nécessaire de fournir aux versions antérieures d’IE l’ancienne méthode en solution de repli, à savoir le passage par un élément Flash.
Heureusement, audio supporte bien l’écriture suivante :
< audio controls > < source src='fanfare.mp3' type='audio/mpeg' > < source src='fanfare.ogg' type='audio/ogg' > < object type='application/x-shockwave-flash' data='player.swf?soundFile=fanfare.mp3' > < param name='movie' value='player.swf?soundFile=fanfare.mp3' > < /object > < /audio >
Voici quelques liens qui vous permettront de poursuivre votre plongée dans cet univers fascinant :
Le tag audio par w3schools.com
https://developer.mozilla.org/en/Using_HTML5_audio_and_video
