Lire des fichiers audio avec la balise audio HTML5

Introduction

Dans ce laboratoire (lab), vous apprendrez à utiliser la balise HTML5 Audio pour intégrer et lire des fichiers audio directement dans les pages web. Ce laboratoire couvre les compétences essentielles pour les développeurs web, notamment la compréhension de la structure de base de la balise audio, la configuration des contrôles audio, l'ajout de plusieurs formats de sources audio, l'exploration d'attributs avancés et la création d'une page web de lecteur audio simple. Grâce à des exercices pratiques, vous acquerrez une expérience concrète dans la mise en œuvre de la fonctionnalité de lecture audio en utilisant les fonctionnalités natives d'HTML5 sans avoir recours à des plugins externes.

En suivant les instructions étape par étape, vous découvrirez comment intégrer de manière transparente le contenu audio dans les pages web, personnaliser les contrôles du lecteur audio et garantir la compatibilité entre navigateurs. Ce laboratoire offre une introduction complète à la manipulation des éléments audio, vous permettant d'améliorer les applications web avec des expériences multimédias riches.

Comprendre les bases de la balise HTML5 Audio

Dans cette étape, vous apprendrez les bases de la balise HTML5 Audio, une fonctionnalité puissante qui vous permet d'intégrer et de lire des fichiers audio directement dans les pages web sans utiliser de plugins externes.

La balise HTML5 <audio> est un élément simple mais polyvalent qui permet aux développeurs web d'inclure facilement du contenu audio. Explorons sa structure fondamentale et son utilisation de base.

Tout d'abord, créez un nouveau fichier HTML dans le répertoire ~/project pour démontrer la balise audio :

cd ~/project
touch audio-basics.html

Ouvrez le fichier audio-basics.html dans le WebIDE et ajoutez la structure HTML de base suivante :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML5 Audio Tag Basics</title>
  </head>
  <body>
    <h1>HTML5 Audio Tag Example</h1>

    <audio src="sample-audio.mp3"></audio>
  </body>
</html>

La balise <audio> de base a une syntaxe simple :

L'attribut src spécifie le chemin vers le fichier audio
Par défaut, l'audio n'aura aucun contrôle visible pour l'utilisateur

Exemple de sortie de la balise audio de base :

Le fichier audio est intégré dans la page
Aucun contrôle de lecture/pause n'est visible
L'audio ne démarrera pas automatiquement par défaut

Points clés concernant la balise HTML5 Audio :

Prend en charge plusieurs formats audio (MP3, WAV, OGG)
Fonctionne sur les navigateurs web modernes
Fournit un moyen natif d'intégrer de l'audio sans plugins

Lorsque vous prévisualisez le fichier audio-basics.html dans le WebIDE, vous ne verrez qu'une page blanche car les contrôles du lecteur audio ne sont pas visibles.

Notes : En savoir plus sur Comment prévisualiser des fichiers HTML dans le WebIDE.

Configurer la balise audio avec des contrôles et une source

Dans cette étape, vous apprendrez à améliorer la balise audio HTML5 en ajoutant des contrôles et en configurant la source audio pour offrir une meilleure expérience utilisateur.

Ouvrez le fichier audio-basics.html dans le WebIDE et modifiez la balise audio pour inclure des contrôles :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML5 Audio Tag with Controls</title>
  </head>
  <body>
    <h1>Audio Player with Controls</h1>

    <audio src="sample-audio.mp3" controls>
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

Modifications clés dans cet exemple :

Ajout de l'attribut controls pour afficher les contrôles de lecture
Inclusion d'un texte de secours pour les navigateurs qui ne prennent pas en charge l'audio HTML5

L'attribut controls fournit une interface de lecteur audio par défaut avec :

Bouton de lecture/pause
Curseur de volume
Barre de progression
Affichage de l'heure actuelle et de la durée

Explorons des options de configuration de source supplémentaires :

<audio controls>
  <source src="sample-audio.mp3" type="audio/mpeg" />
  <source src="sample-audio.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>

Exemple de différentes configurations de sources audio :

Plusieurs balises <source> permettent de sélectionner un format compatible avec le navigateur
L'attribut type spécifie le type MIME du fichier audio
Les navigateurs utiliseront le premier format pris en charge

Exemple de sortie du lecteur audio :

Cliquez sur le bouton de lecture pour démarrer la lecture audio, assurez-vous que l'onglet de votre navigateur n'est pas en sourdine.

Ajouter plusieurs formats de sources audio

Dans cette étape, vous apprendrez à fournir plusieurs formats de fichiers audio pour garantir la compatibilité entre navigateurs et améliorer la fiabilité de la lecture audio.

Tout d'abord, copions le fichier sample-audio.mp3 dans différents formats (music.ogg, music.wav) dans le répertoire ~/project :

cd ~/project
cp sample-audio.mp3 music.mp3
ffmpeg -i sample-audio.mp3 music.ogg
ffmpeg -i sample-audio.mp3 music.wav

Attendez que le processus de conversion soit terminé avant de continuer.

Maintenant, mettez à jour le fichier audio-basics.html pour inclure plusieurs sources audio :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Audio Source Formats</title>
  </head>
  <body>
    <h1>Cross-Browser Audio Playback</h1>

    <audio controls>
      <source src="music.mp3" type="audio/mpeg" />
      <source src="music.ogg" type="audio/ogg" />
      <source src="music.wav" type="audio/wav" />
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

Points clés concernant les sources audio multiples :

Les navigateurs utiliseront le premier format compatible
Les formats audio courants incluent :
- MP3 (audio/mpeg)
- OGG (audio/ogg)
- WAV (audio/wav)
L'ordre est important : liste les formats préférés en premier

Exemple de compatibilité entre navigateurs :

Chrome : Préfère le MP3
Firefox : Préfère le OGG
Safari : Préfère le MP3
Le navigateur sélectionnera automatiquement le premier format pris en charge

Explorer les attributs avancés de la balise audio

Dans cette étape, vous découvrirez les attributs avancés de la balise audio HTML5 qui offrent un meilleur contrôle sur la lecture audio et l'expérience utilisateur.

Mettez à jour le fichier audio-basics.html pour démontrer les attributs avancés :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced Audio Tag Attributes</title>
  </head>
  <body>
    <h1>Advanced Audio Playback Options</h1>

    <audio src="music.mp3" controls autoplay loop preload="metadata" muted>
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

Explication des principaux attributs avancés :

autoplay : Démarre automatiquement la lecture de l'audio lorsque la page se charge
- Utile pour la musique de fond ou les effets sonores
- Note : De nombreux navigateurs bloquent la lecture automatique par défaut
loop : Répète continuellement la piste audio
- Idéal pour la musique de fond ou les boucles sonores
preload : Spécifie comment le navigateur doit charger l'audio
- none : Pas de préchargement
- metadata : Charge uniquement les métadonnées (durée, etc.)
- auto : Précharge le fichier audio entier
muted : Démarre l'audio en mode muet
- Utile pour le contrôle initial de l'utilisateur

Exemple de sortie des contrôles audio avancés :

Créer une page web de lecteur audio simple

Dans cette étape, vous allez créer une page web de lecteur audio complète qui illustre tout ce que vous avez appris sur les balises audio HTML5.

Tout d'abord, créez un nouveau fichier appelé music-player.html dans le répertoire ~/project :

cd ~/project
touch music-player.html

Maintenant, ouvrez music-player.html dans le WebIDE et ajoutez le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Simple Music Player</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        background-color: #f4f4f4;
      }
      .player-container {
        max-width: 400px;
        margin: 50px auto;
        padding: 20px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <div class="player-container">
      <h1>My Music Player</h1>

      <audio id="musicPlayer" controls>
        <source src="music.mp3" type="audio/mpeg" />
        <source src="music.ogg" type="audio/ogg" />
        Your browser does not support the audio element.
      </audio>

      <div>
        <button onclick="document.getElementById('musicPlayer').play()">
          Play
        </button>
        <button onclick="document.getElementById('musicPlayer').pause()">
          Pause
        </button>
        <button onclick="document.getElementById('musicPlayer').volume += 0.1">
          Volume Up
        </button>
        <button onclick="document.getElementById('musicPlayer').volume -= 0.1">
          Volume Down
        </button>
      </div>
    </div>

    <script>
      const player = document.getElementById("musicPlayer");
      player.addEventListener("ended", () => {
        console.log("Song finished playing");
      });
    </script>
  </body>
</html>

N'ayez pas peur si vous êtes nouveau dans le domaine du CSS et du JavaScript. Le code ci-dessus est simple et facile à comprendre. Il inclut un style CSS de base pour le conteneur du lecteur et une conception responsive. Le code JavaScript ajoute un écouteur d'événement au lecteur audio pour enregistrer un message lorsque la chanson a terminé de jouer.

Principales fonctionnalités du lecteur de musique :

Conception responsive avec un style CSS de base
Plusieurs formats de sources audio
Contrôles audio standard
Boutons de lecture/pause personnalisés
Boutons de contrôle du volume
Écouteur d'événement pour la fin de la chanson

Exemple de sortie dans le navigateur :

Résumé

Dans ce laboratoire (lab), les participants ont appris les bases de l'intégration et de la lecture de fichiers audio directement dans des pages web en utilisant la balise audio HTML5. Le laboratoire a guidé les apprenants dans la compréhension de la structure de base de la balise <audio>, la configuration des contrôles audio et l'exploration de divers attributs qui améliorent la fonctionnalité de lecture audio.

Les principaux résultats d'apprentissage comprenaient la manipulation des attributs de source audio, l'ajout de contrôles de lecture, la prise en charge de plusieurs formats audio et la création d'une page web de lecteur audio simple. Les participants ont acquis une expérience pratique dans la mise en œuvre de techniques natives d'intégration audio sans dépendre de plugins externes, démontrant la polyvalence et la facilité d'utilisation des capacités audio d'HTML5 sur les navigateurs web modernes.