Sono Andrea Tonin di Rovigo, mi occupo per professione Web Design e sviluppo web Ho una grande passione per la grafica e per i siti internet visuali e molto interattivi!
HTML5 ha introdotto il marcatore – audio – per la riproduzione del sonoro. Questo marcatore è utilissimo ad esempio qualora volessimo inserire una musica di sottofondo al nostro sito.
Vediamo un esempio pratico nel seguente codice:
<!DOCTYPE html> <html> <head> <title>Titolo del documento</title> </head> <body> <audio controls> <source src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_001.mp3" type="audio/mpeg"> <source src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_001.ogg" type="audio/ogg"> Your browser does not support this audio format. </audio> </body> </html>
Cliccate sul bottone play per ascoltare una piacevole musica di sottofondo 
Music by Dan-O at DanoSongs.com
Se analizziamo il codice noteremo che:
– Forniremo il file audio in MP3 per Internet Explorer, Chrome, e Safari
– Forniremo il file audio in OGG file per Firefox e Opera
– In caso il browser sia troppo vecchio diamo il messaggio “Your browser does not support this audio format.”
L’audio è in streaming quindi non necessiterà il download di tutto il file audio per essere riprodotto.
Vediamo altri attributi utili di questo tag:
– loop: una volta terminato il brano, ricomincerà in automatico dall’inizio
– autoplay: il brano verrà avviato automaticamente senza bisogno di premere il tasto play
– controls: visualizza i controlli play, pause
<!DOCTYPE html> <html> <head> <title>Titolo del documento</title> </head> <body> <!-- Lettore audio completo --!> <audio loop autoplay controls> <source src="music.ogg" /> <source src="music.mp3" /> </audio> <!-- Lettore audio senza controlli, invisibile, parte in automatico con autoplay e va in loop --!> <audio autoplay loop> <source src="music.ogg" /> <source src="music.mp3" /> </audio> </body> </html>
