Come usare il tag audio di HTML5

Pubblicato 14 Aprile 2014

Introduzione

Abbiamo già esaminato in un precedente articolo il nuovo tag <video> introdotto con HTML5 e la sua utilizzazione per mostrare dei filmati in una pagina HTML senza usare Flash.

In modo del tutto analogo, con la nuova versione di questo linguaggio è stato introdotto il corrispondente tag audio che consente la riproduzione di file, appunto, di tipo audio.
La sintassi essenziale è molto semplice:

presupponendo che il file da eseguire si trovi nella stessa cartella della pagina in cui deve essere eseguito.

Formati audio

Per garantire la totale compatibilità del file audio con i diversi browser, soprattutto nella prima fase di diffusione della nuova versione, è opportuno rendere disponibile quest’ultimo in più formati e cioè: ogg, mp3 e wav.
In questo caso si aggiunge il parametro source che consente di specificare diverse alternative da gestire in sequenza e, facoltativamente, il parametro type (vedi più sotto per la spiegazione).

La sintassi di base diventerà dunque la seguente:

Attributi

Esistono diversi attributi che possono essere applicati a questo selettore:

– src: il percorso che punta al file
– type: il tipo di formato del file; serve a indicare al browser appunto di quale tipo di file si tratta e se, dunque, il browser deve caricarlo o passare al tipo successivo
– autoplay: se specificato, avvia in automatico l’esecuzione al caricamento della pagina
– controls: se specificato, visualizza l’interfaccia di controllo (play, stop ecc.) del file
– preload: può assumere tre valori e cioè none, metadata (carica questi ultimi) e auto (default, precarica il file)
– loop: se specificato, determina l’esecuzione ripetuta del file una volta che questo è ultimato

Esempio

Per visualizzare un esempio di utilizzo del tag <audio>, aprire questa pagina.

Browser non compatibili con HTML5

Cosa accade se la pagina viene aperta con un browser non in grado di interpretare correttamente HTML5? Ad esempio Internet Explorer 8?
Proprio nulla il che è inaccettabile, nel senso che lo sviluppatore attento prevede sempre e comunque un’alternativa di fallback o, quantomeno, un messaggio di errore.
In questo secondo caso – meno dispendioso in termini di energie! – sarà sufficiente inserire del testo tra i tag <audio> e </audio>, dopo l’elenco dei files nei vari formati:

<!– fallback per IE8- –>
<p>Il tuo browser non supporta HTML5</p>
<!– /fallback per IE8- –>

</audio>

Meglio sarebbe comunque incorporare sempre in quel punto del codice un lettore Flash che esegue il file audio, così come già spiegato per i file video nel precedente articolo linkato all’inizio.

In caso di errore

Può capitare di aprire la pagina con un browser (ad esempio, con Firefox) e vedere il lettore solo per un istante, dopo di che sparisce.
Se accade questo, significa che il percorso specificato nell’attributo source è sbagliato e va corretto.
Altri browser visualizzano un errore dettagliato in questa circostanza.

E ora … un po’ di buon gusto!

L’inserimento e l’esecuzione di file audio diventa dunque più semplice con HTML5 dato che non servono plugin aggiuntivi di alcun tipo.
Resta valido il concetto che le musiche di sottofondo nelle pagine dei siti risultano la maggior parte delle volte fastidiose, se non imbarazzanti per chi deve navigare senza disturbare il vicino di scrivania (e magari non deve farsi sorprendere dal capoufficio .. ma questo è un altro discorso!).
Il consiglio è quindi sempre quello di impiegare il buon senso, ed il buon gusto, nel non abusare di una soluzione tecnica interessante se applicata correttamente.

Pubblicato in Corsi e formazione, HTML5 | Contrassegnato tag audio di HTML5, tutorial su HTML5, tutorial sul tag audio

Il Blog di Instant Websites