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

BrowserMP3WAVOGG
ChromeSiSiSi
FirefoxSiSiSi
OperaSiSiSi
SafariSiSiNo
IESINoNo

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...
  })