HTML - L'élément Audio

Syntaxe de base

La balise HTML <audio> est utilisée pour ajouter du contenu audio à une page web. C'est une façon simple d'ajouter des fichiers audio à votre site web. La balise <audio> nécessite un attribut src qui pointe vers le fichier audio que vous souhaitez lire. Les formats audio pris en charge incluent MP3, WAV et OGG.

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

L'attribut src indique au navigateur où trouver le fichier audio. Vous pouvez utiliser un chemin relatif si le fichier audio est hébergé sur le même serveur que la page web, ou une URL absolue si le fichier audio est hébergé sur un serveur différent.

Vous pouvez également utiliser l'attribut type pour indiquer au navigateur le type MIME du fichier audio. Cela aide le navigateur à savoir s'il peut lire le fichier audio avant de le télécharger.

<audio src="chemin/vers/fichier/audio.mp3" type="audio/mpeg"></audio>

Tous les navigateurs ne prennent pas en charge les mêmes formats audio. Pour vous assurer que votre audio fonctionne sur le plus grand nombre d'appareils possible, vous pouvez fournir plusieurs sources audio en utilisant la balise <source> à l'intérieur de l'élément <audio>.

<audio>
  <source src="chemin/vers/fichier/audio.mp3" type="audio/mpeg">
  <source src="chemin/vers/fichier/audio.ogg" type="audio/ogg">
  Votre navigateur ne prend pas en charge l'élément audio.
</audio>

Dans cet exemple, le navigateur essaiera de lire la première source (MP3) et si elle n'est pas prise en charge, il essaiera la source suivante (OGG). Si aucun des formats audio ne fonctionne, le navigateur affichera le texte "Votre navigateur ne prend pas en charge l'élément audio."

Le contenu de secours est important pour les anciens navigateurs qui ne prennent pas en charge la balise <audio>. En fournissant un contenu alternatif, vous pouvez vous assurer que tous les utilisateurs peuvent accéder aux informations sur votre page web, même s'ils ne peuvent pas écouter l'audio.

Attributs

La balise HTML <audio> possède plusieurs attributs que vous pouvez utiliser pour contrôler la lecture et l'affichage de l'audio sur votre page web.

L'attribut controls est utilisé pour afficher les contrôles audio, tels que les boutons de lecture, pause et volume. Sans cet attribut, le lecteur audio n'aura pas de contrôles et vous ne pourrez pas démarrer ou arrêter l'audio.

<audio src="path/to/audio/file.mp3" controls></audio>

L'attribut autoplay fait démarrer la lecture de l'audio dès le chargement de la page web. Cela peut être gênant pour vous, il est donc préférable d'utiliser cet attribut avec précaution.

<audio src="path/to/audio/file.mp3" autoplay></audio>

L'attribut loop fait répéter l'audio en continu jusqu'à ce que vous l'arrêtiez. Ceci est utile pour la musique de fond ou les effets sonores.

<audio src="path/to/audio/file.mp3" loop></audio>

L'attribut muted définit l'état de sourdine initial du lecteur audio. Cela signifie que l'audio sera mis en sourdine par défaut lors du chargement de la page web.

<audio src="path/to/audio/file.mp3" muted></audio>

L'attribut preload contrôle la façon dont le navigateur doit charger le fichier audio. Il peut avoir l'une des trois valeurs suivantes :

<audio src="path/to/audio/file.mp3" preload="auto"></audio>

Sources multiples

La balise HTML <audio> vous permet de spécifier plusieurs sources audio en utilisant l'élément <source>. Cela aide à fournir différents formats audio pour s'assurer que votre audio fonctionne sur de nombreux navigateurs et appareils.

Pour utiliser plusieurs sources, ajoutez un ou plusieurs éléments <source> à l'intérieur de la balise <audio>. Chaque élément <source> doit avoir un attribut src qui pointe vers le fichier audio et un attribut type qui spécifie le type MIME du format audio.

<audio>
  <source src="path/to/audio/file.mp3" type="audio/mpeg">
  <source src="path/to/audio/file.ogg" type="audio/ogg">
  <source src="path/to/audio/file.wav" type="audio/wav">
  Votre navigateur ne prend pas en charge l'élément audio.
</audio>

Dans cet exemple, le navigateur essaiera de lire la première source (MP3) et si elle n'est pas prise en charge, il passera à la source suivante (OGG) et ainsi de suite. Si aucun des formats audio spécifiés n'est pris en charge, le navigateur affichera le texte de repli "Votre navigateur ne prend pas en charge l'élément audio."

Différents navigateurs prennent en charge différents formats audio, il est donc important de fournir plusieurs sources pour couvrir un large éventail de navigateurs et d'appareils. Les formats audio les plus courants sont :

Lors de la spécification de sources multiples, ordonnez-les en fonction de votre format préféré. Les navigateurs utiliseront le premier format pris en charge qu'ils trouvent, donc listez votre format préféré en premier.

Fournissez également un contenu de repli pour les navigateurs qui ne prennent pas du tout en charge la balise <audio>. Ajoutez du texte ou d'autres éléments HTML à l'intérieur de la balise <audio>, après les éléments <source>. Ce contenu de repli ne sera affiché que si aucune des sources audio spécifiées ne peut être lue.

L'utilisation de plusieurs éléments <source> et la fourniture d'un contenu de repli aident à s'assurer que votre audio fonctionne sur de nombreux navigateurs et appareils, offrant une bonne expérience utilisateur à tous vos visiteurs.

Stylisation avec CSS

Vous pouvez modifier l'apparence de l'élément HTML <audio> et de ses contrôles en utilisant CSS. Cela vous permet d'adapter le lecteur audio au style de votre page web.

Pour styliser les contrôles audio, vous pouvez utiliser le pseudo-élément ::-webkit-media-controls. Ce pseudo-élément cible les contrôles audio par défaut affichés par le navigateur.

audio::-webkit-media-controls {
  background-color: #f1f1f1;
  color: #333;
  border-radius: 5px;
  padding: 5px;
}

Les contrôles audio reçoivent une couleur de fond gris clair, une couleur de texte gris foncé, des coins arrondis et un peu de rembourrage.

Vous pouvez également styliser des parties spécifiques des contrôles audio, comme le bouton de lecture, la barre de progression et le curseur de volume, en utilisant d'autres pseudo-éléments tels que ::-webkit-media-controls-play-button, ::-webkit-media-controls-progress-bar et ::-webkit-media-controls-volume-slider.

Pour styliser l'élément <audio> lui-même, vous pouvez utiliser des propriétés CSS comme width, height, background, border et margin.

audio {
  width: 300px;
  height: 40px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px auto;
}

L'élément audio reçoit une largeur et une hauteur fixes, une couleur de fond gris clair, une bordure, des coins arrondis et est centré sur la page en utilisant la propriété margin.

Interaction JavaScript

L'élément HTML <audio> peut être contrôlé à l'aide de JavaScript, ce qui permet de créer des lecteurs audio personnalisés et d'ajouter des fonctionnalités interactives à vos pages web.

Pour lire ou mettre en pause un élément audio avec JavaScript, vous pouvez utiliser les méthodes play() et pause(). Sélectionnez d'abord l'élément audio à l'aide d'une méthode comme document.querySelector(), puis appelez la méthode.

<audio id="monAudio" src="chemin/vers/fichier/audio.mp3"></audio>

<button onclick="lireAudio()">Lire</button>
<button onclick="pauseAudio()">Pause</button>

<script>
  var audio = document.querySelector('#monAudio');

  function lireAudio() {
    audio.play();
  }

  function pauseAudio() {
    audio.pause();
  }
</script>

Cliquer sur le bouton "Lire" appellera la fonction lireAudio(), qui sélectionne l'élément audio en utilisant son ID et appelle la méthode play(). De même, cliquer sur le bouton "Pause" appellera la fonction pauseAudio() pour mettre l'audio en pause.

Vous pouvez également ajuster le volume et chercher un moment précis dans l'audio en utilisant JavaScript. La propriété volume contrôle le volume audio, avec des valeurs allant de 0 (muet) à 1 (volume maximum). La propriété currentTime définit ou renvoie la position de lecture actuelle en secondes.

<audio id="monAudio" src="chemin/vers/fichier/audio.mp3"></audio>

<button onclick="definirDemiVolume()">Définir demi-volume</button>
<button onclick="chercher30Secondes()">Aller à 30 secondes</button>

<script>
  var audio = document.querySelector('#monAudio');

  function definirDemiVolume() {
    audio.volume = 0.5;
  }

  function chercher30Secondes() {
    audio.currentTime = 30;
  }
</script>

Cliquer sur le bouton "Définir demi-volume" appellera la fonction definirDemiVolume(), qui définit la propriété volume de l'élément audio à 0.5 (demi-volume). Cliquer sur le bouton "Aller à 30 secondes" appellera la fonction chercher30Secondes(), qui définit la propriété currentTime à 30, sautant à la marque de 30 secondes dans l'audio.

JavaScript peut également écouter les événements audio, comme lorsque l'audio commence à jouer, est mis en pause ou se termine. Vous pouvez utiliser ces événements pour déclencher des fonctions ou mettre à jour l'interface utilisateur.

<audio id="monAudio" src="chemin/vers/fichier/audio.mp3"></audio>
<button onclick="lireAudio()">Lire</button>
<p id="statutAudio"></p>

<script>
  var audio = document.querySelector('#monAudio');
  var statut = document.querySelector('#statutAudio');

  function lireAudio() {
    audio.play();
  }

  audio.onplay = function() {
    statut.textContent = 'L\'audio est en cours de lecture';
  };

  audio.onpause = function() {
    statut.textContent = 'L\'audio est en pause';
  };

  audio.onended = function() {
    statut.textContent = 'L\'audio est terminé';
  };
</script>

Les écouteurs d'événements onplay, onpause et onended sont utilisés pour mettre à jour le contenu textuel de l'élément <p> avec l'ID "statutAudio" en fonction de l'état actuel de l'audio. Lorsque l'audio commence à jouer, le texte changera en "L'audio est en cours de lecture". Lorsqu'il est mis en pause, il affichera "L'audio est en pause", et lorsque l'audio se termine, il affichera "L'audio est terminé".

En combinant ces méthodes et événements JavaScript, vous pouvez créer des lecteurs audio personnalisés avec des fonctionnalités telles que des boutons de lecture/pause, des curseurs de volume, des barres de progression, et plus encore. JavaScript offre un contrôle sur l'élément <audio>, vous permettant de créer des expériences audio engageantes et interactives sur vos pages web.

Considérations d'accessibilité

Lors de l'ajout de contenu audio à vos pages web, il est important de penser à l'accessibilité pour tous les utilisateurs, y compris ceux ayant des déficiences auditives ou des handicaps. Voici quelques façons de rendre votre contenu audio plus accessible :

Fournir des transcriptions de votre contenu audio est un moyen de le rendre accessible aux utilisateurs sourds ou malentendants. Une transcription est une version textuelle du contenu parlé dans votre audio. Vous pouvez fournir une transcription sur la même page que votre lecteur audio ou créer un lien vers une page séparée avec la transcription complète.

<audio src="chemin/vers/fichier/audio.mp3" controls></audio>

<p>
  <a href="transcription.html">Lire la transcription</a>
</p>

L'utilisation des attributs ARIA (Applications Internet Riches Accessibles) peut également améliorer l'accessibilité de votre lecteur audio. Les attributs ARIA fournissent des informations supplémentaires sur les éléments de votre page aux technologies d'assistance comme les lecteurs d'écran.

<audio id="monAudio" src="chemin/vers/fichier/audio.mp3" controls>
  <p>Votre navigateur ne prend pas en charge l'élément audio.</p>
</audio>

<button onclick="jouerAudio()" aria-controls="monAudio">
  Lire l'audio
</button>

L'attribut aria-controls est ajouté au bouton de lecture, indiquant qu'il contrôle l'élément audio avec l'ID "monAudio". Cela aide les lecteurs d'écran à comprendre la relation entre le bouton et le lecteur audio.

Voici quelques bonnes pratiques pour créer des lecteurs audio accessibles :

<div class="lecteur-audio">
  <audio id="monAudio" src="chemin/vers/fichier/audio.mp3">
    <p>Votre navigateur ne prend pas en charge l'élément audio.</p>
  </audio>

  <div class="controles">
    <button id="lirePause" onclick="basculerLirePause()" aria-controls="monAudio">
      Lire/Pause
    </button>
    <input id="curseurVolume" type="range" min="0" max="1" step="0.1" value="1" onchange="ajusterVolume()" aria-controls="monAudio">
  </div>

  <div class="transcription">
    <a href="transcription.html">Lire la transcription</a>
  </div>
</div>

Cet exemple montre un lecteur audio avec des fonctionnalités accessibles :

• L'élément <audio> a un message de repli pour les navigateurs qui ne le prennent pas en charge.
• Le bouton lire/pause et le curseur de volume ont des étiquettes claires et des attributs aria-controls pour les lier à l'élément audio.
• Le curseur de volume peut être ajusté à l'aide des touches fléchées du clavier.
• Un lien vers la transcription est fourni sous le lecteur audio.

Prise en charge des navigateurs et solutions de repli

L'élément HTML <audio> est pris en charge par la plupart des navigateurs web modernes, notamment Chrome, Firefox, Safari et Edge. Cependant, les navigateurs plus anciens peuvent ne pas prendre en charge la balise <audio> ou avoir une prise en charge limitée pour certains formats audio.

Pour vérifier si un navigateur prend en charge l'élément <audio>, vous pouvez utiliser JavaScript pour tester la présence de l'objet HTMLAudioElement :

if (typeof HTMLAudioElement !== 'undefined') {
  // Le navigateur prend en charge l'élément audio
} else {
  // Le navigateur ne prend pas en charge l'élément audio
}

Si le navigateur ne prend pas en charge l'élément <audio>, vous pouvez fournir un contenu de repli à l'intérieur de la balise <audio>. Ce contenu de repli ne sera affiché que si le navigateur ne peut pas lire l'audio.

<audio src="chemin/vers/fichier/audio.mp3" controls>
  <p>Votre navigateur ne prend pas en charge l'élément audio.</p>
  <a href="chemin/vers/fichier/audio.mp3">Télécharger le fichier audio</a>
</audio>

Une autre approche de repli consiste à utiliser les éléments <object> ou <embed> pour intégrer un plugin de lecteur audio, comme Flash ou QuickTime. Cependant, ces plugins deviennent moins courants et ne sont pas pris en charge par les appareils mobiles.

<audio src="chemin/vers/fichier/audio.mp3" controls>
  <object type="application/x-shockwave-flash" data="chemin/vers/lecteur.swf?audio=chemin/vers/fichier/audio.mp3">
    <param name="movie" value="chemin/vers/lecteur.swf?audio=chemin/vers/fichier/audio.mp3">
    <p>Votre navigateur ne prend pas en charge l'élément audio ou Flash.</p>
  </object>
</audio>

Pour gérer plus facilement la compatibilité entre les navigateurs, vous pouvez utiliser des bibliothèques audio HTML5 qui fournissent une interface de lecteur audio cohérente sur différents navigateurs. Voici quelques bibliothèques audio populaires :

Ces bibliothèques font abstraction des différences entre les navigateurs et fournissent un moyen unifié de travailler avec l'audio dans vos pages web.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>

<script>
  var son = new Howl({
    src: ['chemin/vers/fichier/audio.mp3', 'chemin/vers/fichier/audio.ogg'],
    html5: true,
    onplay: function() {
      console.log('La lecture audio a commencé');
    },
    onend: function() {
      console.log('La lecture audio est terminée');
    }
  });

  son.play();
</script>

Dans cet exemple, la bibliothèque howler.js est incluse dans la page, et un nouvel objet Howl est créé avec les sources audio et les options. L'option html5 est définie sur true pour prioriser la lecture audio HTML5. Les callbacks onplay et onend sont utilisés pour enregistrer des messages lorsque l'audio commence et finit de jouer. Enfin, la méthode play() est appelée pour commencer la lecture de l'audio.

Exemples et cas d'utilisation

L'élément HTML <audio> a de nombreuses utilisations pour ajouter de l'audio aux pages web. Voici quelques exemples :

<h2>Dernier épisode de podcast</h2>
<audio controls>
  <source src="path/to/podcast/episode.mp3" type="audio/mpeg">
  <p>Votre navigateur ne prend pas en charge l'élément audio.</p>
</audio>
<p>Dans cet épisode, nous discutons des dernières tendances en développement web.</p>

<audio id="backgroundMusic" loop>
  <source src="path/to/background-music.mp3" type="audio/mpeg">
  <source src="path/to/background-music.ogg" type="audio/ogg">
</audio>

<script>
  var backgroundMusic = document.getElementById('backgroundMusic');
  backgroundMusic.volume = 0.5; // Régler le volume à 50%
  backgroundMusic.play(); // Commencer à jouer la musique de fond
</script>

<div class="audio-player">
  <audio id="myAudio">
    <source src="path/to/audio/file.mp3" type="audio/mpeg">
    <source src="path/to/audio/file.ogg" type="audio/ogg">
    <p>Votre navigateur ne prend pas en charge l'élément audio.</p>
  </audio>
  <div class="controls">
    <button id="playPauseBtn" onclick="togglePlayPause()">Lecture/Pause</button>
    <input id="volumeSlider" type="range" min="0" max="1" step="0.1" value="1" onchange="adjustVolume()">
    <span id="currentTime">0:00</span> / <span id="duration">0:00</span>
  </div>
</div>

<script>
  var audio = document.getElementById('myAudio');
  var playPauseBtn = document.getElementById('playPauseBtn');
  var volumeSlider = document.getElementById('volumeSlider');
  var currentTimeDisplay = document.getElementById('currentTime');
  var durationDisplay = document.getElementById('duration');

  function togglePlayPause() {
    if (audio.paused) {
      audio.play();
      playPauseBtn.textContent = 'Pause';
    } else {
      audio.pause();
      playPauseBtn.textContent = 'Lecture';
    }
  }

  function adjustVolume() {
    audio.volume = volumeSlider.value;
  }

  audio.addEventListener('timeupdate', function() {
    currentTimeDisplay.textContent = formatTime(audio.currentTime);
  });

  audio.addEventListener('durationchange', function() {
    durationDisplay.textContent = formatTime(audio.duration);
  });

  function formatTime(time) {
    var minutes = Math.floor(time / 60);
    var seconds = Math.floor(time % 60);
    return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
  }
</script>

Dans cet exemple, le lecteur audio personnalisé dispose d'un bouton lecture/pause, d'un curseur de volume et affiche le temps actuel et la durée de l'audio. Le code JavaScript gère la fonctionnalité lecture/pause, le réglage du volume et met à jour l'affichage du temps pendant la lecture de l'audio.

Ce ne sont que quelques exemples d'utilisation de l'élément HTML <audio> pour ajouter de l'audio à vos pages web. Que vous intégriez des podcasts, ajoutiez de la musique de fond ou créiez des lecteurs audio personnalisés, l'élément <audio> vous offre un moyen simple de travailler avec l'audio dans le développement web.