Il tag audio in HTML

Il tag audio in HTML

Il tag <audio> permette di inserire un file audio in un file HTML in modo che l’utente che legge quella pagina web può ascoltare musica, podcast o altri tipi di suoni.

I tipi file audio supportati sono:

  • MP3: è il formato più usato oggi per ascoltare musica;
  • OGG: Qualità simile all’MP3, viene usato nei giochi per computer;
  • WAV: Il vecchio formato ed è lo stesso dei file estratti da un CD di musica.

Come inserire un elemento audio in un file HTML

Ci sono modi leggermente diversi per utilizzare l’elemento audio in una pagina web.

Visual Studio Code, ad esempio, inserisce automaticamente la risorsa del file all’interno del tag di apertura come mostrato sotto:

<audio src="file.mp3">Il tuo browser non è in grado di riprodurre il brano</audio>

Bisogna, comunque, inserire al suo interno i vari attributi per permettere all’utente di ascoltare quel file mentre il testo inserito tra i due tag viene visualizzato su vecchi browser che non sono in grado di riprodurre questi file. Comunque, difficilmente oggi succede una cosa simile.

AttributiDescrizione
autoplayAppena il browser carica il file audio, fa partire la musica
controlsPermette all’utente di interagire con il file, mettendolo in pausa o abbassandone il volume
loopOgni volta che il brano finisce, ricomincia da capo
mutedIl volume è reso inattivo in modo che sia l’utente ad attivarlo
srcIndica la risorsa che deve essere caricata
<audio src="file.mp3" controls>Il tuo browser non è in grado di riprodurre il brano</audio>

Si possono inserire più attributi separati da uno spazio senza bisogno di virgole o altri segni di punteggiatura.

Un altro modo per aggiungere un elemento audio in un file HTML era quello di inserire diversi formati in modo che se il browser non ne supporti uno, carica automaticamente l’altro:

<audio controls>
 <source src="file.ogg" type="audio/ogg">
 <source src="file.mp3" type="audio/mpeg">
 <source src="file.wav" type="audio/wav">
 Il tuo browser non è in grado di riprodurre il brano
</audio

Gli attributi si scrivono sempre nel suo tag di apertura mentre le varie risorse vengono aggiunte all’interno dei due tag come se questo elemento fosse un vero e proprio contenitore. Come già spiegato, oggi non è necessario fare questi passaggi.

/ 5
Grazie per aver votato!