Docs HTML exécutables : Audio en HTML

Q: Comment ajouter de l'audio à une page HTML ?

Utilisez . L'attribut controls affiche le lecteur du navigateur avec un bouton de lecture, une barre de progression et le volume. Sans lui, l'élément est invisible.

Q: Comment lire un audio en boucle en HTML ?

Ajoutez l'attribut loop : . À la fin du fichier, la lecture recommence depuis le début.

Q: Comment jouer un son en JavaScript ?

Créez ou sélectionnez un élément audio et appelez play(), par exemple new Audio('click.mp3').play() dans un gestionnaire de clic. play() renvoie une promesse rejetée si le navigateur bloque la lecture.

Comment ajouter de l'audio

Faites pointer l'élément <audio> vers un fichier son et ajoutez controls :

<audio src="song.mp3" controls></audio>

controls affiche le lecteur du navigateur : lecture et pause, barre de progression, temps et réglage du volume. Sans controls, l'élément ne prend aucune place. L'aperçu ne peut pas charger de fichiers depuis votre ordinateur, donc cet exemple construit un court fichier WAV dans le navigateur avec un script et l'utilise comme src. Appuyez sur lecture :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Audio</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <audio id="player" controls></audio>
  <p>Four notes, 1.8 seconds.</p>
  <script>
    // Builds a tiny WAV file in the browser (stand-in for song.mp3)
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    document.getElementById('player').src = makeWav([[523, 0.4], [659, 0.4], [784, 0.4], [1047, 0.6]]);
  </script>
</body>
</html>

Le lecteur a une apparence différente dans Chrome, Firefox et Safari, car chaque navigateur dessine le sien. Supprimez controls et le lecteur disparaît, même si l'audio reste disponible pour que le JavaScript le lise.

Les attributs de audio

Attribut	Rôle
`controls`	Affiche le lecteur du navigateur
`autoplay`	Tente de lancer la lecture au chargement (bloqué avec le son, voir plus bas)
`loop`	Recommence à la fin du fichier
`muted`	Démarre avec le volume coupé
`preload`	`none` (rien télécharger avant la lecture), `metadata` (seulement la durée) ou `auto` (le navigateur décide)
`src`	Le fichier à lire ; ou utilisez des enfants `<source>` pour plusieurs formats

Utilisez preload="none" ou "metadata" pour les pages avec beaucoup de lecteurs, comme une liste d'épisodes de podcast, pour que la page ne télécharge pas tous les fichiers d'avance.

Formats et replis

Listez plusieurs fichiers avec <source> et le navigateur lit le premier qu'il prend en charge. Le texte à l'intérieur de l'élément ne s'affiche que dans les navigateurs sans prise en charge de <audio> :

<audio controls preload="metadata">
  <source src="episode.opus" type="audio/ogg; codecs=opus">
  <source src="episode.mp3" type="audio/mpeg">
  <p>Your browser cannot play audio. <a href="episode.mp3">Download the episode</a>.</p>
</audio>

Format	Type MIME	Remarques
MP3	`audio/mpeg`	Se lit dans tous les navigateurs actuels ; le choix sûr pour un seul fichier
AAC (`.m4a`)	`audio/mp4`	Largement pris en charge, bonne qualité pour une petite taille
Opus ou Vorbis (`.ogg`, `.webm`)	`audio/ogg`, `audio/webm`	Fichiers légers ; listez un MP3 en repli, car la prise en charge par Safari varie selon la version
WAV	`audio/wav`	Non compressé et lourd ; convient aux effets sonores courts

Pourquoi l'autoplay échoue

Les navigateurs ne laissent pas une page commencer à faire du bruit d'elle-même. autoplay, ou un appel à play() avant que l'utilisateur ait cliqué ou touché l'écran, est refusé. Cet exemple tente de lire au chargement et affiche ce qui s'est passé, puis propose un bouton :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 14px; }
  </style>
</head>
<body>
  <p id="result">Trying to play...</p>
  <button id="play">Play with a click</button>
  <script>
    // Builds a short beep as a WAV file (stand-in for a real sound file)
    function beep(freq, secs) {
      const rate = 8000, n = secs * rate;
      const view = new DataView(new ArrayBuffer(44 + n * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + n * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, n * 2, true);
      for (let i = 0; i < n; i++) view.setInt16(44 + i * 2, Math.sin(2 * Math.PI * freq * i / rate) * 12000, true);
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const sound = new Audio(beep(440, 0.5));
    const result = document.getElementById('result');
    sound.play()
      .then(() => { result.textContent = 'Autoplay worked this time.'; })
      .catch((err) => { result.textContent = 'Autoplay was blocked: ' + err.name; });
    document.getElementById('play').onclick = () => {
      sound.currentTime = 0;
      sound.play()
        .then(() => { result.textContent = 'Playing, because you clicked.'; })
        .catch((err) => { result.textContent = 'Still blocked: ' + err.name; });
    };
  </script>
</body>
</html>

Vous verrez généralement NotAllowedError, l'erreur que donne un navigateur quand il bloque la lecture. Le bouton fonctionne car un clic vaut autorisation. Chaque navigateur a ses propres règles supplémentaires (Chrome, par exemple, retient les sites où vous lisez souvent des médias), donc ne comptez jamais sur l'autoplay : lancez le son depuis une action de l'utilisateur, et gérez toujours la promesse renvoyée par play().

new Audio(url) crée un élément audio en JavaScript sans l'ajouter à la page, ce qui est pratique pour les effets sonores.

Construire vos propres contrôles

Masquez le lecteur intégré en omettant controls, puis pilotez l'élément avec son API JavaScript : play(), pause(), currentTime, duration, volume, et des événements comme timeupdate et ended :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom player</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .player { display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 10px; border: 2px solid #e5e7eb; border-radius: 10px; }
    .player button { font: inherit; width: 72px; padding: 6px 0; border: 0; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; }
    progress { flex: 1; }
    #time { font-variant-numeric: tabular-nums; font-size: 14px; color: #374151; }
  </style>
</head>
<body>
  <div class="player">
    <button id="toggle" aria-label="Play">Play</button>
    <progress id="bar" value="0" max="1"></progress>
    <span id="time">0.0 s</span>
  </div>
  <audio id="audio"></audio>
  <script>
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const audio = document.getElementById('audio');
    const toggle = document.getElementById('toggle');
    audio.src = makeWav([[392, 0.5], [440, 0.5], [494, 0.5], [523, 1]]);
    toggle.onclick = () => {
      if (audio.paused) audio.play().catch((err) => { toggle.textContent = err.name; });
      else audio.pause();
    };
    audio.addEventListener('play', () => { toggle.textContent = 'Pause'; toggle.setAttribute('aria-label', 'Pause'); });
    audio.addEventListener('pause', () => { toggle.textContent = 'Play'; toggle.setAttribute('aria-label', 'Play'); });
    audio.addEventListener('timeupdate', () => {
      document.getElementById('bar').value = audio.currentTime / audio.duration || 0;
      document.getElementById('time').textContent = audio.currentTime.toFixed(1) + ' s';
    });
  </script>
</body>
</html>

Le bouton est un vrai <button>, il fonctionne donc au clavier, et son libellé alterne entre Play et Pause. À la fin du fichier, le navigateur met l'élément en pause et déclenche ended, donc le bouton revient tout seul à Play. Si vous construisez des contrôles personnalisés, vous reprenez aussi à votre charge ce que les contrôles intégrés offraient gratuitement : la prise en charge du clavier, les libellés et un réglage du volume.

Accessibilité

Ne lancez jamais le son tout seul. Il interrompt les lecteurs d'écran et fait sursauter les gens. Lancez l'audio depuis un clic.
Proposez une transcription pour les podcasts et l'audio parlé. Un lien vers une version texte sous le lecteur suffit, et les moteurs de recherche peuvent la lire.
Gardez controls, ou construisez des contrôles avec de vrais boutons, pour que l'audio puisse être mis en pause au clavier.

Pour la vidéo avec son, les sous-titres et les posters, voir la page vidéo en HTML ; <audio> partage la plupart de ses attributs et toute son API JavaScript.

Erreurs fréquentes

Oublier controls. L'élément est invisible sans lui, et on a l'impression que rien ne s'est passé.
S'attendre à ce que autoplay fonctionne. Lancez la lecture depuis un clic et gérez la promesse de play().
Un mauvais chemin ou un mauvais type de fichier. Ouvrez directement l'URL du fichier pour la vérifier, et faites correspondre type au vrai format (audio/mpeg pour le MP3).
Charger tous les fichiers d'une longue liste. Utilisez preload="none" ou "metadata".
Une musique de fond impossible à arrêter. Donnez toujours aux gens un moyen visible de mettre en pause.

Questions fréquentes

Comment ajouter de l'audio à une page HTML ?

Utilisez <audio src="song.mp3" controls></audio>. L'attribut controls affiche le lecteur du navigateur avec un bouton de lecture, une barre de progression et le volume. Sans lui, l'élément est invisible.

Pourquoi mon audio ne démarre pas automatiquement ?

Les navigateurs bloquent l'audio qui démarre avec du son avant que l'utilisateur n'ait interagi avec la page. Lancez plutôt la lecture depuis un clic avec audio.play(). Un élément muet peut démarrer seul, mais pour de l'audio c'est rarement utile.

Quel format audio utiliser en HTML ?

Le MP3 se lit dans tous les navigateurs actuels, c'est donc le choix sûr pour un seul fichier. L'AAC dans un fichier .m4a est aussi largement pris en charge. Utilisez des éléments <source> pour proposer plusieurs formats.

Comment lire un audio en boucle en HTML ?

Ajoutez l'attribut loop : <audio src="rain.mp3" controls loop>. À la fin du fichier, la lecture recommence depuis le début.

Comment jouer un son en JavaScript ?

Créez ou sélectionnez un élément audio et appelez play(), par exemple new Audio('click.mp3').play() dans un gestionnaire de clic. play() renvoie une promesse rejetée si le navigateur bloque la lecture.

Peut-on styliser le lecteur audio HTML ?

Seulement un peu : vous pouvez régler sa largeur, sa marge et son affichage, mais les boutons à l'intérieur sont dessinés par le navigateur et diffèrent de l'un à l'autre. Pour une apparence personnalisée, masquez les contrôles et construisez les vôtres avec des boutons et l'API JavaScript audio.

Concepts liés