Comment ajouter une musique de fond en HTML

Diverses méthodes d'intégration de musique dans une page web sont devenues populaires depuis les premiers jours du World Wide Web. Notamment, la balise « embed » en HTML, les lecteurs audio basés sur Java et les lecteurs basés sur Flash sont toutes des options possibles pour ajouter de la musique de fond à une page web, mais aucune solution n'a été universellement adoptée ni n'est pleinement compatible avec tous les navigateurs et plateformes. La nouvelle norme HTML5 inclut la balise « audio », spécifiquement définie pour la lecture audio intégrée.

Étape 1 : Code de base pour lecture automatique

Ajoutez le code suivant n'importe où dans le corps de votre document HTML pour intégrer un fichier musical et le lire automatiquement lorsqu'un visiteur parcourt votre site web.

<audio src="chemin/fichier.mp3" autoplay></audio>

Modifiez l'attribut « src » pour qu'il contienne le chemin et le nom du fichier musical que vous souhaitez intégrer.

Étape 2 : Lecture en boucle

Ajoutez l'attribut « loop » si vous voulez que le fichier musical se répète indéfiniment :

<audio src="chemin/fichier.mp3" autoplay loop></audio>

Étape 3 : Multiples formats pour compatibilité

Utilisez plusieurs balises « source » au lieu de l'attribut « src » de la balise « audio » si vous voulez offrir au navigateur de l'utilisateur un choix de plusieurs formats de fichiers :

<audio autoplay loop>
<source src="musique/fichier.mp3" type="audio/mpeg">
<source src="musique/fichier.ogg" type="audio/ogg">
</audio>

Dans cet exemple, le navigateur de l'utilisateur décidera de lire le fichier MP3 ou le fichier OGG. Cette technique peut être utile pour cibler les appareils mobiles qui ne peuvent lire que certains formats audio.

Étape 4 : Compatibilité avec les anciens navigateurs

Imbriquez la balise « embed » dans la balise « audio » pour fournir un support aux anciens navigateurs qui ne supportent pas HTML5. Notez que cette utilisation de la balise « embed » est dépréciée (ce qui signifie qu'elle n'est plus officiellement requise pour être supportée), donc n'expérimentez cette technique que si vous suspectez que vos utilisateurs utiliseront d'anciens navigateurs web. Voici un exemple :

<audio autoplay loop>
<source src="musique/fichier.mp3" type="audio/mpeg">
<source src="musique/fichier.ogg" type="audio/ogg">
<embed src="musique/fichier.mp3" autostart="true" loop hidden>
</audio>

Astuce

Envisagez d'ajouter l'attribut « controls » à la balise « audio » pour permettre à l'utilisateur d'arrêter la musique et de changer le volume. De plus, envisagez de ne pas utiliser l'attribut « autoplay » à moins qu'il n'y ait une bonne raison pour ce comportement du navigateur. De nombreux utilisateurs trouvent la musique de fond intégrée qui se lance inopinément sans leur permission agaçante et quitteront votre site immédiatement.