Radio Player 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>

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

Attribut spécifique à la balise <audio>

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 <audio> supporte tous les attributs globaux (id, class, title …) et tous les attributs d’évènements (onfocus, onblur, ….).

Réagissez et donner votre avis

Réagissez