audio

Il tag <audio> è utilizzato per incorporare contenuti sonori su un documenti, come della musica o altre sorgenti audio.

All’interno del tag <audio>, possono esserci più o meno sorgenti audio indicate con il tag <source>. Il browser sceglierà automaticamente la prima sorgente supportata.

Il testo tra l’apertura e la chiusura del tag saranno mostrati solo dai browser che non supportano l’elemento <audio>.

I formati audio supportati in HTML sono MP3, WAV e OGG.

Esempio

Attributi

controls
Un valore booleano che specifica se mostrare o no i controlli dell’audio( tasto avvio/pausa, barra, volume). Se assente, l’elemento audio non verrà visualizzato.

<audio controls></audio>

autoplay
Un valore booleano che specifica se riprodurre l’audio automaticamente dopo il caricamento della pagina.

<audio autoplay></audio>

muted
Un valore booleano che specifica se l’audio sarà inizialmente mutato o no. Il valore predefinito è false.

<audio muted></audio>

loop
Un valore booleano che specifica se l’audio si ripeterà di continuo dall’inizio quando la prima riproduzione è finita.

<audio loop></audio>

preload
Questo attributo è utilizzato per specificare se l’audio deve essere caricato quando la pagina viene caricata. Inoltre così è possibile dire al browser se scaricare l’audio e salvarlo nella cache o no.

<audio preload="none"></audio>

• none: Indica che il file audio non deve essere caricato prima al caricamento della pagina.
• metadata: Il browser carica solo i dati meta dell’audio (es: durata).
• auto: L’intero file audio può essere scaricato, anche se l’utente non deve necessariamente utilizzarlo.

Audio con sorgente Singola o Multipla

Se l’audio ha una sola sorgente, è possibile specificarla con l’attributo src:

<audio controls src="audio.ogg">
  Il tuo browser non supporta l'elemento audio.
</audio>

Una sorgente singola può essere specificata anche utilizzando il tag <source>.

<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  Il tuo browser non supporta l'elemento audio.
</audio>

L’elemento <source> sostituisce completamente l’attributo src quando si vogliono indicare più sorgenti audio.

Indicare più sorgenti, è utile nel caso si voglia includere una versione dell’audio in formato ogg, che ha una qualità migliore e dimensioni minori rispetto ai file mp3, sfortunatamente il formato ogg non è supportato in tutto i browser come riporta la tabella sottostante.

<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
  Il tuo browser non supporta l'elemento audio.
</audio>

Il browser legge le sorgenti dall’alto al basso, quindi i browser che supportano i file ogg lo riprodurranno, mentre per i restanti c’è il file mp3.

Tabella dei Formati Audio Supportati

Applicare CSS all’elemento Audio

Nonostante sia impossibile applicare CSS ai componenti individuali del player audio come i bottoni o le icone, si possono personalizzare i componenti esterni.

audio {
  display: /*...*/,
  border: /*...*/,
  padding: /*...*/,
  margin: /*...*/,
}

Eventi Audio JavaScript

Ci sono moltissimi eventi collegati al player audio, alcuni esempi possono essere play quando inizia la riproduzione, pause quando la riproduzione viene messa in pausa e ended quando la riproduzione è finita. L’elenco completo è disponibile su MDN.

Possono essere utilizzati in questo modo:

// Seleziona il tag audio
document.querySelector('audio')
  // Aggiungi al tag un'ascoltatore per l'evento
  .addEventListener('play', () => {
    // Codice da eseguire...
  })