41Mag - Lecture d’un fichier .mp3 ou audio en HTML5

Lecture d’un fichier .mp3 ou audio en HTML5

S’il y a encore quelques temps il était assez compliqué de lire un fichier audio ou mp3 depuis votre site web, le HTML5 à simplifié sa mise en place. A partir d’une simple balise à insérer dans votre page web, la lecture de votre fichier musicale s’effectuera simplement.

Pour utiliser ce lecteur HTML5, vous devez utiliser la balise <audio>. 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 <audio> 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 <audio>

1
2
3
4
<audio controls="controls">
  <source src="music.mp3" type="audio/mp3" />
  Votre navigateur n'est pas compatible
</audio>

Les lignes de code ci-dessus sont très simple à comprendre.La première ligne sert à insérer la balise <audio> 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 <source> se ferme seule (comme la balise meta, ou la balise img pour les images par exemple).

Astuce : Pensez à bien indiquer entre les balises <audio> et </audio> 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 <audio>.

Attribut spécifique à la balise <audio>

AttributValeurDescription
autoplayautoplayLecture automatique au chargement de la page
controlscontrolsAffiche les boutons de contrôle du lecteur
looploopLecture en boucle
preloadauto
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
srcurlDéfinissez l’adresse du fichier musicale ou sonore

La balise <audio> supporte tous les attributs globaux (id, class, title …) et tous les attributs d’évènements (onfocus, onblur, ….).

L’attibut preload – préChargement

1
2
3
4
<audio controls="controls" preload="none">
  <source src="music.mp3" type="audio/mp3" />
  Votre navigateur n'est pas compatible
</audio>

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 …)

1
2
3
4
5
6
<audio controls="controls" preload="none">
  <source src="music.mp3" type="audio/mp3" />
  <source src="music.aac" type="audio/aac" />
  <source src="music.ogg" type="audio/ogg" />
  Votre navigateur n'est pas compatible
</audio>

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 <audio>, 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 …

[cadreHTML5]

Pour en savoir plus sur le HTML5, consulter notre tutoriel complet HTML5.

Article du même thême : .

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.