Ajouter de l’audio à une page web avec HTML est assez facile. Toute personne ayant des connaissances HTML de base peut le faire. L’essentiel est de comprendre comment la balise

Cela dit, la qualité audio est tout aussi importante que la fonctionnalité. Si vous ajoutez des enregistrements vocaux, l’utilisation d’un microphone de qualité peut faire une grande différence. Un appareil comme le Hollyland LARK A1 fonctionne très bien. Il offre de solides performances, avec des fonctionnalités telles que la protection automatique contre l’écrêtage, une portée sans fil de 200 mètres et 3 niveaux de suppression intelligente du bruit.

Hollyland LARK A1 - Affordable Wireless Microphone

A perfect starter mic for creators on a budget. It’s simple to use and features effective noise cancellation.

Key Features: 48kHz/24-bit | 3-Level Noise Cancellation | 54-Hour Battery

Check on Amazon

Comment fonctionne la balise audio HTML

Vous pouvez lire du son sur une page web à l’aide de la balise

Placez la balise source à l’intérieur de la balise audio pour lier votre fichier. Cela indique au navigateur quel audio charger et quel format attendre. Si un navigateur ne prend pas en charge la balise audio, vous pouvez afficher un court message. De cette façon, les utilisateurs sauront que la fonctionnalité sonore ne fonctionne pas pour eux.

Il existe également quelques attributs supplémentaires :

• autoplay : Démarre l’audio lorsque la page se charge.
• muted : Coupe le son de l’audio par défaut.
• loop : Répète l’audio encore et encore.

HTML prend en charge ces trois formats audio :

• MP3 (meilleure prise en charge sur tous les navigateurs)
• WAV
• OGG

MP3 est le choix le plus sûr, car il fonctionne presque partout.

Comment ajouter de l’audio en HTML : instructions étape par étape

Suivez ces étapes pour ajouter de l’audio à votre page HTML :

1. Préparez votre fichier audio

• Utilisez MP3 pour de meilleurs résultats sur tous les navigateurs.
• Placez le fichier audio dans le même dossier que votre fichier HTML.

• Vous pouvez obtenir de la musique gratuite à partir de la bibliothèque audio de YouTube.

Vous pouvez également télécharger des pistes à partir de n’importe quel site web libre de droits.

2. Créez la structure HTML

• Ouvrez votre fichier HTML.
• À l’intérieur de la balise , ajoutez une balise

<audio></audio>

• Enregistrez le fichier HTML et actualisez le navigateur.

3. Ajoutez des commandes au lecteur audio

• À l’intérieur de la balise

<audio controls></audio>

• Enregistrez et actualisez la page.
• Vous devriez voir un lecteur audio sur la page du navigateur.

Cependant, pour le moment, la barre devrait être grisée, signalant que nous devons ajouter plus d’attributs et de balises.

4. Liez le fichier audio

• Entre les balises audio ouvrantes et fermantes, insérez une balise.
• Utilisez l’attribut « src » pour pointer vers le nom du fichier audio.

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

• Enregistrez et actualisez. Les commandes audio devraient maintenant être actives.

5. Ajoutez un message de repli

• Au cas où le navigateur ne prendrait pas en charge l’audio, écrivez un message simple.

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

6. Utilisez un chemin de fichier (si l’audio se trouve dans un dossier différent)

• Si le fichier audio ne se trouve pas dans le même dossier, incluez le chemin complet.

<source src="C:/Users/YourName/Desktop/bro_time.mp3" type="audio/mpeg">

7. Mettez l’audio en boucle

• Pour répéter l’audio en continu, ajoutez « loop » à la balise audio.

<audio controls loop>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

8. Démarrez l’audio en mode silencieux

• Pour lire l’audio en mode silencieux par défaut, utilisez muted.

<audio controls muted>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

9. Lecture automatique de l’audio

• Ajoutez autoplay pour démarrer l’audio automatiquement.

<audio controls autoplay>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

Important : La lecture automatique ne fonctionne pas bien dans les navigateurs modernes, en particulier Chrome et les appareils mobiles. De plus, de nombreux experts ne recommandent pas la balise audio de lecture automatique, car elle peut violer la confidentialité des utilisateurs.

10. Masquez les commandes pour l’audio en arrière-plan

• Supprimez l’attribut controls pour lire de la musique de fond sans qu’aucun lecteur ne soit visible.

<audio autoplay>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

• Utilisez ceci à bon escient. La lecture automatique d’audio masqué peut ennuyer les utilisateurs.

Cas d’utilisation : création d’une page web avec plusieurs fichiers audio

Vous voulez essayer un exemple concret ? Créons une page de musique de base. Cela peut être un projet amusant. Tout ce dont vous avez besoin, ce sont quelques fichiers audio et un fichier HTML de base.

Suivez ces étapes pour le construire :

Préparez vos fichiers audio

• Choisissez au moins quatre chansons ou clips sonores MP3
• Nommez-les clairement comme bro_time.mp3, block_party.mp3
• Placez tous les fichiers audio dans le même dossier que votre fichier HTML

Démarrez un nouveau document HTML

• Ouvrez n’importe quel éditeur de texte comme le Bloc-notes ou VS Code
• Créez un fichier .html vierge
• Enregistrez-le dans le même dossier que vos fichiers audio

Configurez le titre de la page

• À l’intérieur de la section , ajoutez un titre principal

MeTunes

Ajoutez la première piste audio

• Tapez le nom de la chanson à l’aide d’une balise

• Ajoutez un lecteur audio ci-dessous avec le fichier source

<h3>Bro Time</h3>

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

Répétez l’opération pour d’autres chansons

• Copiez et collez la même structure
• Modifiez le titre et le nom du fichier source

<h3>Block Party</h3>

<audio controls>

  <source src="block_party.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<h3>City Night Lights</h3>

<audio controls>

  <source src="city_night_lights.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<h3>Beat Your Competition</h3>

<audio controls>

  <source src="beat_your_competition.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

Ajoutez de l’espace entre chaque piste

• Utilisez des balises
  pour ajouter un espacement supplémentaire
• Cela permet de garder la page propre et facile à lire

Testez-la dans un navigateur

• Double-cliquez sur votre fichier HTML pour l’ouvrir
• Assurez-vous que toutes les chansons fonctionnent correctement
• Si quelque chose ne fonctionne pas, vérifiez les noms de fichiers et les chemins d’accès

Vous avez maintenant une page de musique fonctionnelle utilisant HTML de base. Chaque fichier audio affiche son propre lecteur, et tout fonctionne correctement.

CONSEIL : Voici le code complet de ce projet. Copiez-le et collez-le simplement. Modifiez les chemins d’accès aux fichiers et les noms des chansons pour vous entraîner à ajouter vos morceaux préférés à un site HTML.

<!DOCTYPE html>

<html>

  <head>

  <title>MY PRACTICE AUDIO HTML SITE</title>

</head>

  <body>

    <h1>SongSite</h1>

    <br>

Song One:

    <br>

<audio controls>

  <source src="song_one.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<br>

Song Two:

    <br>

<audio controls>

  <source src="song_two.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

    <br>

  Song Three:

    <br>

<audio controls>

  <source src="song_three.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<br>

    Song Four:

    <br>

<audio controls>

  <source src="song_four.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

    <br>

  </body>

</html>

Si vous l’avez fait correctement, la page HTML devrait ressembler à ceci :

Conclusion

Lorsque vous comprenez les bases de la balise audio, l’insertion de musique dans une page HTML devient un jeu d’enfant. Cet article montre chaque étape essentielle qui vous permet d’ajouter une piste audio à HTML.

Cependant, il est important que vous utilisiez les attributs corrects pour assurer la confidentialité des utilisateurs. De la même manière, nous recommandons toujours d’utiliser de la musique libre de droits ou sous licence pour vous éviter toute violation du droit d’auteur.

FAQ

1. Comment rendre le lecteur audio invisible en HTML ?

Pour garder le lecteur audio masqué, ignorez le mot controls dans la balise. Lorsque quelqu’un visite votre page, l’audio est lu sans rien afficher. Si vous utilisez également autoplay, il démarre immédiatement. Soyez prudent. Certains navigateurs peuvent bloquer le son s’il n’y a pas de commandes.

2. Que font les balises audio et vidéo en HTML ?

Les balises audio et vidéo vous permettent d’ajouter du son ou de la vidéo. Vous pouvez placer de la musique ou des clips directement sur votre page. Ces balises font partie de HTML5 et fonctionnent dans la plupart des navigateurs aujourd’hui. Ajoutez-les à l’intérieur de la section body pour afficher les lecteurs à l’écran. Elles prennent également en charge différents types de fichiers, selon le navigateur.

3. Les gens utilisent-ils encore HTML pour les sites web modernes ?

Oui, HTML est toujours utilisé pour construire chaque site en ligne. Même les pages avancées ont besoin de HTML pour la structure et la mise en page. Il aide avec le référencement, la vitesse de chargement et la conception de la page. Qu’il s’agisse d’une petite page ou d’une page complexe, HTML est toujours important. Sans lui, aucun site web ne se chargerait correctement dans aucun navigateur.