Karim's Blog

Un peu de tout sur CSS, HTML, AngularJS, JavaScript, Php et le reste

Lecture d’un fichier .mp3 ou audio en HTML5

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 …