Guida HTML interattiva: Tag audio

Q: Come inserisco un audio in una pagina HTML?

Usa . L'attributo controls mostra il player del browser con un pulsante play, una barra di avanzamento e il volume. Senza, l'elemento è invisibile.

Q: Come ripeto un audio in loop in HTML?

Aggiungi l'attributo loop: . Quando il file finisce, ricomincia dall'inizio.

Q: Come riproduco un suono con JavaScript?

Crea o seleziona un elemento audio e chiama play(), per esempio new Audio('click.mp3').play() dentro un gestore di clic. play() restituisce una promise che viene rifiutata se il browser blocca la riproduzione.

Come inserire un audio

Punta l'elemento <audio> a un file audio e aggiungi controls:

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

controls mostra il player del browser: play e pausa, una barra di avanzamento, il tempo e il volume. Senza controls l'elemento non occupa alcuno spazio. L'anteprima non può caricare file dal tuo computer, quindi questo esempio crea un breve file WAV nel browser con uno script e lo usa come src. Premi play:

<!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>

Il player ha un aspetto diverso in Chrome, Firefox e Safari, perché ogni browser disegna il suo. Cancella controls e il player sparisce, anche se l'audio c'è ancora e JavaScript può riprodurlo.

Attributi di audio

Attributo	Cosa fa
`controls`	Mostra il player del browser
`autoplay`	Prova ad avviare la riproduzione al caricamento (bloccato con il sonoro, vedi sotto)
`loop`	Ricomincia quando il file finisce
`muted`	Parte con il volume spento
`preload`	`none` (non scarica nulla fino al play), `metadata` (solo la durata) o `auto` (decide il browser)
`src`	Il file da riprodurre; oppure usa figli `<source>` per più formati

Usa preload="none" o "metadata" nelle pagine con molti player, come un elenco di episodi di un podcast, così la pagina non scarica subito tutti i file.

Formati e alternative

Elenca più file con <source> e il browser riproduce il primo che supporta. Il testo dentro l'elemento compare solo nei browser senza supporto per <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>

Formato	Tipo MIME	Note
MP3	`audio/mpeg`	Si riproduce in tutti i browser attuali; la scelta sicura se ne usi uno solo
AAC (`.m4a`)	`audio/mp4`	Supportato ampiamente, buona qualità con file piccoli
Opus o Vorbis (`.ogg`, `.webm`)	`audio/ogg`, `audio/webm`	File piccoli; aggiungi l'MP3 come alternativa, perché il supporto in Safari cambia da versione a versione
WAV	`audio/wav`	Non compresso e pesante; va bene per brevi effetti sonori

Perché l'autoplay non funziona

I browser non lasciano che una pagina inizi a emettere suoni da sola. autoplay, o chiamare play() prima che l'utente abbia cliccato o toccato, viene rifiutato. Questo esempio prova a riprodurre al caricamento e scrive cosa è successo, poi offre un pulsante:

<!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>

Di solito vedrai NotAllowedError, l'errore che il browser dà quando blocca la riproduzione. Il pulsante funziona perché un clic vale come permesso. Ogni browser ha le sue regole in più (Chrome, per esempio, ricorda i siti dove riproduci spesso contenuti multimediali), quindi non fare mai affidamento sull'autoplay: avvia il suono da un'azione dell'utente e gestisci sempre la promise che play() restituisce.

new Audio(url) crea un elemento audio in JavaScript senza aggiungerlo alla pagina, comodo per gli effetti sonori.

Crea i tuoi controlli

Nascondi il player integrato lasciando fuori controls, poi comanda l'elemento con la sua API JavaScript: play(), pause(), currentTime, duration, volume ed eventi come timeupdate e 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>

Il pulsante è un vero <button>, quindi funziona con la tastiera, e la sua etichetta passa da Play a Pause. Alla fine del file il browser mette in pausa l'elemento e lancia ended, così il pulsante torna da solo su Play. Se crei controlli personalizzati, ti fai carico anche di quello che quelli integrati ti davano gratis: supporto della tastiera, etichette e controllo del volume.

Accessibilità

Non far mai partire un suono da solo. Interrompe i lettori di schermo e spaventa le persone. Avvia l'audio da un clic.
Offri una trascrizione per podcast e audio parlato. Basta un link a una versione testuale sotto il player, e i motori di ricerca possono leggerla.
Tieni controls, oppure crea i controlli con veri pulsanti, così l'audio si può mettere in pausa con la tastiera.

Per video con audio, sottotitoli e immagini di copertina, vedi la pagina sul tag video; <audio> condivide gran parte dei suoi attributi e tutta la sua API JavaScript.

Errori comuni

Dimenticare controls. Senza, l'elemento è invisibile e sembra che non sia successo nulla.
Aspettarsi che autoplay funzioni. Avvia la riproduzione da un clic e gestisci la promise di play().
Percorso o tipo del file sbagliato. Apri direttamente l'URL del file per verificarlo, e fai corrispondere type al formato reale (audio/mpeg per l'MP3).
Caricare tutti i file di un elenco lungo. Usa preload="none" o "metadata".
Musica di sottofondo che non si può fermare. Dai sempre alle persone un modo visibile per mettere in pausa.

Domande frequenti

Come inserisco un audio in una pagina HTML?

Usa <audio src="song.mp3" controls></audio>. L'attributo controls mostra il player del browser con un pulsante play, una barra di avanzamento e il volume. Senza, l'elemento è invisibile.

Perché il mio audio non parte da solo?

I browser bloccano l'audio che parte con il sonoro prima che l'utente abbia interagito con la pagina. Avvia la riproduzione da un clic con audio.play(). Un elemento silenziato può partire da solo, ma per l'audio serve di rado.

Quale formato audio conviene usare in HTML?

L'MP3 si riproduce in tutti i browser attuali, quindi è la scelta sicura per un file singolo. Anche l'AAC in un file .m4a è supportato ampiamente. Usa elementi <source> per offrire più di un formato.

Come ripeto un audio in loop in HTML?

Aggiungi l'attributo loop: <audio src="rain.mp3" controls loop>. Quando il file finisce, ricomincia dall'inizio.

Come riproduco un suono con JavaScript?

Crea o seleziona un elemento audio e chiama play(), per esempio new Audio('click.mp3').play() dentro un gestore di clic. play() restituisce una promise che viene rifiutata se il browser blocca la riproduzione.

Posso dare stile al player audio HTML?

Solo un po': puoi impostarne larghezza, margine e display, ma i pulsanti interni li disegna il browser e sono diversi in ognuno. Per un aspetto tuo, nascondi i controlli e crea i tuoi con dei pulsanti e l'API audio di JavaScript.

Concetti correlati