2.31
Analizziamo ogni potenziale opzione per incorporare un file audio in una pagina web utilizzando il linguaggio di markup HTML.
Prima dell’introduzione di HTML5, l’ultima versione dello standard HTML che si è adeguata in modo significativo alle esigenze del web moderno, era necessario utilizzare il tag <object> per incorporare un file audio in una pagina HTML. Anche se il tag <object> è ancora in uso (non solo per l’inserimento di file audio), HTML5 ha introdotto un nuovo tag appositamente pensato per questo scopo, ovvero il tag <audio>.
Nella seguente lezione, esamineremo come utilizzare il nuovo tag <audio> introdotto con HTML5. Per iniziare, presentiamo un esempio semplice:
<audio controls> <source src=”musica.mp3″ type=”audio/mp3″> </audio>
Il primo attributo da menzionare è “controls”, il cui utilizzo assicura la presenza di controlli utente per gestire la riproduzione del file audio. Se si omette l’attributo “controls”, è possibile incorporare un file audio in background, poiché l’assenza dei controlli renderà l’elemento audio invisibile all’utente. In passato, questa funzionalità era implementata tramite il tag <bgsound>, ma questo tag non è mai stato standardizzato ed è quindi preferibile evitarlo.
Altri due attributi possibili per il tag <audio> sono “autoplay” e “loop”. Il primo avvia automaticamente la riproduzione dell’audio, mentre il secondo fa sì che l’audio venga riprodotto in modo continuo.
All’interno del tag <audio>, è presente un elemento di tipo <source>, che consente di specificare il file audio da riprodurre. Nel caso precedente, abbiamo specificato il file “musica.mp3” utilizzando l’attributo “src”, assicurandoci anche di specificare il tipo di file tramite “type=”audio/mp3”.
Poiché alcuni tipi di file audio potrebbero non essere supportati da tutti i browser, è possibile specificare più tag <source>. Ad esempio:
<audio controls> <source src=”musica.mp3″ type=”audio/mp3″> <source src=”musica2.ogg” type=”audio/ogg”> Il browser non supporta il tag audio </audio>
In questo caso, il browser cercherà prima di tutto di riprodurre il file specificato nel primo tag <source>. Se per qualche motivo il file non può essere riprodotto, il browser proverà a riprodurre il secondo file e così via per tutti i tag <source> presenti. Per garantire la retrocompatibilità con le versioni precedenti di HTML, è possibile utilizzare una stringa o altro codice HTML che verrà visualizzato nel caso in cui il browser non supporti il tag <audio>.