INSERIRE L’ AUDIO IN HTML


HTML5 offre la possibilità di inserire file sonori all’ interno dei nostri documenti grazie al nuovo tag <audio>.

Questo elemento offre la possibilità di inserire questi file nei seguenti formati: Mp3 , Wav ed Ogg.




Trattandosi di un tag relativamente “recente” , è interamente supportato dalle seguenti versioni di browsers in poi:

  •   versione 4.0
  • versione 3.5
  • versione 4.0
  • versione 9.0
  • versione 10.5

Inoltre , non tutti i browsers sopracitati , supportano i 3 tipi di file che il tag <audio> riesce a gestire , di seguito un riassunto.




  • supporta i seguenti formati : MP3 , WAV ,OGG
  • supporta i seguenti formati : MP3 , WAV ,OGG
  • supporta i seguenti formati : MP3 , WAV
  • supporta i seguenti formati : MP3
  • supporta i seguenti formati : MP3 , WAV ,OGG

Il tag <audio> , supporta le proprietà globali e gli eventi globali di HTML.

Sintassi di base

La sintassi di base per inserire un file audio in Html è la seguente:

<audio controls>
<source src=”nomecanzone.estensione” type=”audio/estensione”>
Frase da mostrare a video nel caso in cui il browser non supporti l’audio.
</audio>

Esempio

<!doctype html>
<html lang=”it”>
<body>
<audio controls>
<source src=”sweatdreams.mp3″ type=”audio/mp3″>
Your browser does not support the audio element.
</audio>
</body>
</html>

Con il codice sopra indicato, abbiamo inserito la canzone sweetdreams.mp3 (salvata nella stessa directory della pagina) , all’ interno di un documento HTML.

  • <audio controls> : mostra i controlli di riproduzione (play , pausa , volume)
  • <source src> : indica il nome del file da riprodurre
  • <type> : indica il formato
  • <audio controls> testo </audio>: mostra un testo nel caso in cui il formato dell’ audio non sia riconosciuto dal nostro browser.



AUTOPLAY (autoriproduzione)

Per far partire automaticamente il file audio , senza possibilità di avviarlo e stopparlo , si utilizza l’ attributo autoplay. 

Autoplay così come mostrato nell’ esempio , riproduce la traccia una volta soltanto , senza mostrare i comandi di riproduzione.

E’ possibile mostrare i comandi di riproduzione modificando la linea <audio autoplay> in <audio autoplay controls>.

In questo caso , l’ audio partirà autonomamente , ma può essere fermato o riprodotto nuovamente dall’ utente.

LOOP (riproduzione continua )

Per fare in modo che la nostra traccia audio venga riprodotta continuamente al suo termine , utilizziamo l’ attributo loop.

Questo attributo può essere utilizzato in due modi:

  • Con la possibilità di utilizzare i comandi <audio controls loop>
  • Senza la possibilità di utilizzare i comandi <audio autoplay loop>



Modificando come segue il nostro codice HTML il file audio, partirà tramite comando manuale (e potrà essere stoppata in egual modo) , ma continuerà a ricominciare una volta terminata.

<!doctype html>
<html lang=”it”>
<body>
<audio controls loop>
<source src=”sweetdreams.mp3″ type=”audio/mp3″>
</audio>
</body>
</html>

Modificando come segue il nostro codice HTML il file audio partirà automaticamente e continuerà a riprodursi fino alla chiusura della pagina stessa.

<!doctype html>
<html lang=”it”>
<body>
<audio autoplay loop>
<source src=”sweetdreams.mp3″ type=”audio/mp3″>
</audio>
</body>
</html>


Continua a leggere