logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

Gli audio

Gli audio sono elementi multimediali poco utilizzati nei siti web, di solito solo in quelli che trattano musica.

I tag degli audio

Per inserire un audio, si utilizza il tag <audio>. Come per i video, anche in questo caso si deve indicare la sorgente dell’audio, cioè dove si trova il file audio, e bisogna usare il tag <source>. Si aggiunge sempre l’attributo src con l’indirizzo del file audio, e type=”valore” che indica il file e la sua estensione.

<audio>
  <source src="esempio.mp3" type="audio/mp3">
</audio>

Attenzione: le estensioni supportate sono .mp3 (audio/mpeg), .ogg (audio/ogg), .wav (audio/wav).

I controlli degli audio

Un importante attributo è controls in <audio> che, come nei video, permette all’utente di usare i controlli dell’audio che, ad esempio, servono per andare avanti e indietro.

<audio controls>
  <source src="esempio.mp3" type="audio/mpeg">
</audio>

Mutare un audio

L’attributo muted in <audio> serve per mutare l'audio.

<audio muted>
  <source src="esempio.mp3" type="audio/mpeg">
</audio>

Avviare automaticamente l’audio

Per avviare automaticamente l’audio, bisogna inserire l’attributo autoplay. Alcuni browser potrebbero bloccare questi audio se non contengono l'attributo muted.

<audio autoplay>
  <source src="esempio.mp3" type="audio/mpeg">
</audio>

Ripetere gli audio automaticamente

Se vuoi che un audio si ripeta quando finisce, puoi usare l’attributo loop.

<audio loop>
  <source src="esempio.mp3" type="audio/mpeg">
</audio>

Aggiungere più sorgenti in un audio

Nel caso in cui un audio non fosse disponibile, si possono inserire più sorgenti di altri audio, con <source>, uno sotto l’altro. Si può usare questo metodo per inserire due estensioni dello stesso audio. Sotto <source>, puoi indicare una scritta che viene visualizzata solo quando tutte le sorgenti contengono audio che non possono essere riprodotti.

<audio>
  <source src="esempio.mp3" type="audio/mpeg">
  <source src="esempio.ogg" type="audio/ogg">
Errore di riproduzione!
</audio>
Prova!Scegli l'opzione corretta tra quelle elencate.
<audio>
  <______ src="esempio.mp3" type="audio/mp3">
</audio>
Prova!Completa gli spazi vuoti con il tag appropriato.
<!-- Audio che si ripete automaticamente -->
<audio >
  <source src="esempio.mp3" type="audio/mp3">
</audio>
Prossima lezione