Ajouter un lecteur audio HTML 5 compatible tout navigateur

Ceci est toujours un article consacré aux nouvelles balises HTML 5.

Vous en avez sûrement entendu parler.

Grâce à HTML 5 il est beaucoup plus simple d’utiliser des lecteurs audio et vidéo. Plus besoin de coder en langage flash avec l’ActionScript 3. Vous avez une seule balise à mettre avec les différentes options, et cela ajoute directement un lecteur audio ou un lecteur vidéo.

Enfin, cet article est consacré à la lecture de fichiers audio grâce à HTML 5.

L’ajout d’un fichier audio

Comment ça marche ?

Vous avez comme nous vous l’avons dit, une seule balise, la balise audio avec plusieurs attributs qui va vous permettre de mettre différentes options dans votre balise audio.

Vous avez l’attribut src, c’est là où vous donner l’adresse, l’URL de votre fichier son. Il peut être situé sur un autre domaine, ou sur votre domaine, dans un répertoire, dans l’arborescence de vos domaines, bref n’importe où.

Ensuite, vous avez l’attribut controls, qui va vous permettre de choisir d’afficher les contrôles du lecteur audio. C’est-à-dire, la lecture, l’arrêt, l’avancement et le volume, ou de les masquer, c’est vous qui choisissez en fonction du type de lecteur audio que vous souhaitez proposer à vos utilisateurs.

Vous avez autoplay pour la lecture automatique des fichiers audio dès l’affichage de la page.

Continuons avec loop, ça veut dire qu’une fois que la lecture du fichier son est terminée, il est lu à nouveau par le lecteur audio.

L’attribut preload que je vous conseille d’utiliser, permet d’activer ou non le téléchargement du fichier audio lors du chargement de la page.

Donc preload none, il n’y a rien, le fichier audio n’est pas pré chargé, rien. Preload = metadata, il y a juste le pré chargement des métadonnées du fichier audio qui s’effectue. Et preload auto, que nous vous conseillons d’utiliser, fait un pré chargement automatique du fichier audio, quand utilisateur va cliquer sur Lecture, ce sera un instantané parce que le fichier audio sera déjà chargé par le navigateur.

Exemple :

<audio controls preload="auto" src="jingle.mp3"> Votre navigateur ne supporte pas la balise audio . </audio>

Sur ce code, vous apercevez une première utilisation de la balise audio, utilisant le fichier jingle.mp3 avec les éléments de contrôle de la lecture et un préchargement lorsque la page est affichée à l’utilisateur. Le texte contenu entre les balises ouvrante et fermante sera affiché uniquement si le navigateur de l’utilisateur ne supporte pas la balise audio, sinon l’utilisateur ne le verra pas.

Votre utilisateur verra :

Les formats pris en charge

Plusieurs formats de fichier sont prévus pour être lus avec la balise audio.

Vous avez le format ogg, un format libre et performant avec une qualité supérieure au format MP3.

Ensuite, bien évidemment, vous avez le format MP3, le bien connu MP3 qui est une compression avec une perte de qualité sonore significative, mais qui reste toutefois acceptable pour l’oreille humaine.

Vous avez le format aac, Advanced Audio Coding, plus performant encore en compression que le format ogg et MP3, et pour ceux qui ont un iPod ou une tablette iPad, c’est le format utilisé par Apple.

Vous avez également le format wav qui est supporté par la balise audio HTML 5, là, il n’y a aucune compression, la taille des fichiers Web est beaucoup trop importante, donc je vous déconseille de l’utiliser.

Méfiez-vous également, tous les navigateurs ne supportent pas de base tous les formats. Il semble que MP3 le soit pour tous les grands navigateurs, mais c’est une autre histoire pour les autres formats. Donc testez vos formats dans les principaux navigateurs, sinon vous risquez d’afficher un message type source invalide à votre utilisateur.

La balise <source>

Parlons justement de la source. Pour contourner le problème soulevé ci-dessus à propos de la compatibilité des navigateurs, l’alternative est de proposer plusieurs fichiers proposant le même contenu mais dans un format différent.

Notre premier exemple devient alors :

<audio controls preload="auto"> <source src="jingle.ogg"> <source src="jingle.mp3"> <source src="jingle.acc"> Votre navigateur ne suppo rte pas la balise audio. </audio>

Le navigateur sélectionnera et chargera le premier fichier audio qu’il sera capable de lire. Mettre plusieurs balises source ne vous permettra pas de jouer une liste de lecture par exemple, c’est pourquoi elles doivent représenter un même contenu, à moins que vous ayez besoin de jouer un contenu différent suivant le navigateur.

Conclusion

Il n’a jamais été aussi simple d’ajouter un lecteur audio sur une page Web qu’en utilisant la simple balise HTML 5 audio et ses attributs. Pensez à ajouter plusieurs fichiers dans des formats différents pour être sûr que votre utilisateur pourra l’entendre. Voici un site pour convertir vos fichiers audio dans plusieurs formats : www.convertfiles.com