[HTML5/JS] Utiliser la balise <audio>.

Tutoriel | | Html 5 / JS.

Introduction.

Html 5 s'impose comme une véritable révolution sur la toile. En quelques mois seulement, cette nouvelle mouture du W3C a littéralement dévorée le xHtml 1.1 pour former un nouveau standard. Dans les nouveaux éléments, deux on le vents en poupe : les balises audio et video.

Dans ce tutoriel je n'apporterais que les spécifications de la balise audio. Pourquoi c'est-elle fait autant remarqué dès sa sortie ? Pour des raisons simple. Il était auparavant compliqué d'utiliser un fichier audio sur le web. Il n'existait pour cela que des applications lourdes et souvent propriétaires, les très connues lecteurs Flash, puis dans les solutions moins populaires : QuickTime et quelques sombres bibliothèques Javascript. Pour couronner le tout, la comptabilité inter-navigateurs de ces solutions étaient souvent quelques peu hasardeuse et demandait du temps de développement supplémentaire.

Heureusement, HTML 5 rend cela incroyablement simple grâce à une API (Interface de programmation), une balise et quelques attributs. Vous allez voir, c'est un jeu d'enfant (;

La balise audio et ses attributs.

La balise audio doit contenir l'adresse du fichier à lire. Elle peut l'inclure directement comme attributs ou entre une balise source, solution privilégiée dans l'exemple ci-dessous. Nous allons chercher deux fichiers, un en MP3 et l'autre en OGG pour des questions de comptabilités.

Code:: <audio id="MyPlayer">
<source src="ADRESSE_DU_FICHIER.mp3"></source>

<source src="ADRESSE_DU_FICHIER.ogg"></source>

Votre navigateur ne supporte pas la balise audio.
</audio>

Comme vous pouvez le constater, nous ajoutons également un ID (MyPlayer) à notre balise pour pouvoir facilement la modifier par la suite avec Javascript. L'élément audio dispose également de trois attributs supplémentaires.

Controls : Affiche les contrôles, soit un lecteur basique.
Autoplay Lance la musique automatiquement dès que celle-ci est chargée.
Loop : Répète indéfiniment le fichier audio.

Pour terminer, une petite astuce, qui permet de jouer de la musique de manière complètement transparente. Ajouter ce style CSS à votre balise pour la faire disparaître :

Code:: visibility: hidden;
display:none;

Il suffira d'un peu de JavaScript pour l'utiliser sans que celle-ci soit visible. C'est ce qui est utilisé pour faire des signatures contenant de la musique ou pour les jeux vidéos en HTML 5. (;

Un peu de JavaScript.

{U.C}

Browser Support & Audio Format

Internet Explorer 8 et ses versions précédentes ne supportent pas l'élément audio. Elle est tout de même compatible avec Internet Explorer 9, Mozilla Firefox, Chrome, Safari et Opera. Tout les utilisateurs du web à jour par rapport aux nouvelles technologies en somme tongue

.

Un problème subsiste cependant, les navigateurs bien incapables se concerter pour choisir un format audio standard ont chacun choisit le leur. Ainsi il est toujours nécessaire de charger au minimum deux fichiers pour assurer la comptabilité cross-navigateur. Les deux formats en questions sont MP3 (Standard pour Internet Explorer, Chrome et Safari) et OGG (Pour Firefox et Opera).

Le tableau suivant comporte les différents formats supportés :

Browser	MP3	Wav	Ogg
Internet Explorer 9+	Oui	Non	Non
Chrome 6+	Oui	Oui	Oui
Firefox 3.6+	Non	Oui	Oui
Safari 5+	Oui	Oui	Non
Opera 10+	Non	Oui	Oui