Lecture d’un fichier .mp3 ou audio en HTML5
our utiliser ce lecteur HTML5, vous devez utiliser la balise . Cette balise a été implanté dans le HTML5 afin de faciliter la lecture de fichier musicaux ou sonore.
Compatibilité des différents navigateurs
Pour connaître la compatibilité des balises HTML5 avec les différents navigateurs, consultez le CSS3 & HTML5 Readiness. A l’heure ou j’écris ces lignes – septembre 2011, la balise
est compatible avec les principaux navigateurs suivants :
- Chrome
- Opéra 11
- Safari 5
- Internet explorer 9
- Firefox (à partir de la version 3.6)
Exemple d’utilisation de la balise
<controls="controls"> < src="music.mp3" type="audio/mp3" /> Votre navigateur n'est pas compatible Les lignes de code ci-dessus sont très simple à comprendre.La première ligne sert à insérer la balise et donc indiquer au navigateur qu’il devra afficher un contenu audio. La deuxième ligne indique l’emplacement du fichier audio. Dans notre exemple, celui-ci se rouge à la racine de notre site web. Noter que la balise
se ferme seule (comme la balise meta, ou la balise img pour les images par exemple).
Astuce : Pensez à bien indiquer entre les balises
et
un petit texte qui s’affichera si le navigateur n’est pas compatible avec cette balise du HTML5.
Et enfin, à la dernière et quatrième ligne nous refermons la balise .
Attribut spécifique à la balise
| Attribut | Valeur | Description |
|---|---|---|
| autoplay | autoplay | Lecture automatique au chargement de la page |
| controls | controls | Affiche les boutons de contrôle du lecteur |
| loop | loop | Lecture en boucle |
| preload | auto metadata none | Définis si le fichier musicale ou sonore est pré-chargé en même temps que la page ou uniquement lorsque l’utilisateur clic sur play |
| src | url | Définissez l’adresse du fichier musicale ou sonore |
La balise
supporte tous les attributs globaux (id, class, title …) et tous les attributs d’évènements (onfocus, onblur, ….).
L’attibut preload – préChargement
controls="controls" preload="none"> src="music.mp3" type="audio/mp3" /> Votre navigateur n'est pas compatible Si vous souhaitez, par exemple, afficher plusieurs lecteurs sur une même page afin de présenter plusieurs morceaux audio, il vous sera très utile de préciser le préChargement. En effet, si chacun des lecteurs chargent son propre morceaux, cela risque de mettre beaucoup de temps avant que tout soit prêt.
En réglant l’attribut preload sur ‘none’ ou sur ‘metadata’, vous économiserez sur le temps de chargement et donc sur la bande passante.
NONE signifie aucun préChargement, tandis que METADATA ne préCharge qu’uniquement les méta-données du fichiers audio (titre …).
Compatibiité de lecture du TYPE de fichier audio (mp3, aac …)
controls="controls" preload="none"> src="music.mp3" type="audio/mp3" /> src="music.aac" type="audio/aac" /> src="music.ogg" type="audio/ogg" /> Votre navigateur n'est pas compatible Le HTML5 n’étant pas encore totalement prêt, la compatibilité pose souvent problème. Dans ce cas précis, suivant les principaux navigateurs compatible avec la balise , ils ne seront pas tous capables de lire les mêmes TYPE de fichier audio. Le format .mp3 est reconnu et lu par Chrome ou Internet explorer 9 mais pas par Firefox 3.6 qui lui ne reconnait et lis que les formats Vorbis.
Afin de simplifier l’utilisation au maximum, si vous regardez le code ci-dessus, vous remarquerez qu’il n’y a pas UNE mais TROIS sources. C’est pour être sur que votre navigateur reconnaitra et lira bien votre fichier. Cela demande de manipuler le fichier audio et de le convertir dans différents formats, mais de cette facon, vous serez certain de sa compatibilité.
Le navigateur ne lira pas les trois sources de fichier audio (.mp3, .ogg et .aac) de l’exemple de code ci-dessus. Si celui-ci est capable de lire la première source – format .mp3 – alors il la lira et fera l’impasse sur les sources suivantes. En revanche, s’il est incapable de lire ce format, il passera à la deuxième source – format .aac. Et ainsi de suite …