Audio in HTML5: suoni e musica

HTML5 ha introdotto nuovi elementi e nuovi attributi per poter ascoltare e gestire un brano audio senza preoccuparsi se nel PC di chi visualizza la pagina web ci siano o meno i programmi e/o i plug-in istallati, Quello che serve è tutto all’interno del browser.
Di seguito la descrizione con esempi degli elementi usabili per l’audio. Nelle attuali versioni di alcuni browser si riscontra che non tutti si comportano allo stesso modo ma possiamo dire che a differenza delle versioni precedenti tutti riescono a riprodurre l’audio cambiando soltanto quello che è la loro interfaccia grafica di controllo.

Vi segnalo questo sito che vi permette direttamente on line di convertire audio da e verso qualsiasi formato.

<audio>…</audio>

L’elemento <audio> richiama un file di tipo audio facendo uso dell’attributo srcpraticamente allo stesso modo di come si è abituati ad usare il tag img. Al momento sono tre i formati audio supportati: MP3, Ogg e Wav.

Potrei quindi usare uno dei tre formati con questa sintassi:

Questo il risultato:

Non si sente nulla? è probabile perchè non tutti i browser supportano il formato mp3. Ma allora qualcuno penserà che anche con html5 non è cambiato nulla, tranquilli, la soluzione c’è, ho fatto volutamente questo passaggio per farvi capire meglio lo scopo dell’elemento source spiegato subito sotto.

<source>

L’elemento <source> si adopera all’interno dell’elemento <audio>, richiama tramite il suo attributo src il tipo di file audio. Praticamente la stessa cosa vista sopra ma con la notevole differenza che è possibile dichiarare all’interno di <audio> più di un solo source. Così facendo i formati audio dichiarati saranno più di uno e sarà il browser a riprodurre quello da lui stesso riconosciuto ignorando gli altri. A differenza di src per audio che richiamava soltanto il nome del file, con source si deve specificare tramite l’attributo type, anche il tipo di codifica mine:

MP3 = audio/mp3
Ogg = audio/ogg
Wav = audio/wav

Potrei quindi usare tutti e tre i formati con questa nuova sintassi:

Questo il risultato, sono sicuro che anche il vostro browser vi farà ascoltare il brano.

Questi sotto i tre formati presi singolarmente, al solo scopo di vedere quali dei tre il tuo browser supporta.

Formato mp3

Formato ogg

Formato wav

In tutti gli esempi sopra ho fatto uso dell’attributo controls anche se nel codice degli esempi non è riportato, lo andremo a vedere subito, mi è servito per mostrare l’interfaccia grafica offrendovi la possibilità di avviare e fermare la riproduzione audio.

controls

L’attributo controls permette di avere un’interfaccia grafica che cambia a seconda del browser e che serve per fermare/avviare l’audio, controllare il volume, spostarsi all’interno della traccia audio.

Questo il risultato:

Portate il cursore del mouse sopra l’interfaccia grafica, vedrete la possibilità di controllare il volume, mettere l’audio in pausa, riavviarlo, spostarsi in punti diversi del brano. La qualità e la durata del brano sono volutamente ridotte per non gravare sulle risorse del mio spazio web, tenete sempre in considerazione il consumo di banda usando brani di lunga durata e di ottima qualità.

autoplay

L’attributo autoplay inserito nell’elemento <audio> indica al browser di avviare automaticamente il brano non appena questo è stato caricato.

loop

L’attributo loop inserito nell’elemento <audio> indica al browser di ripetere la riproduzione del brano all’infinito.

Questo il risultato:

Una volta avviato si fermerà soltantoi cliccando sul pulsantino dell’interfaccia grafica.

preload

L’attributo preload inserito nell’elemento <audio> accetta tre valori: auto, metadate e none se non si specifica nulla, il solo preload assume come valore di default auto. Questi tre valori indicano al browser rispettivamente:

auto = carica il brano durante il caricamento della pagina, si avranno così meno attese nella sua esecuzione.

metadate = non caricare il brano durante il caricamento della pagina ma solo le sue informazioni.

none = non caricare l’audio se non quando sarà premuto il pulsantino [play] dell’interfaccia.

Questo il risultato:

Facciamo una considerazione, perchè mai dovrei caricare sempre nella memoria cache del browser il brano, specialmente poi se ha notevoli dimensioni? Chi mi assicura che poi questo sarà ascoltato volentieri da chi visita la mia pagina? Avrei uno spreco di banda e di risorse, meglio fare in modo di consumare queste risorse soltanto per chi è realmente interessato all’audio, quindi personalmente scelgo none.

src

L’attributo src inserito nell’elemento <audio> o <source> indica il nome del file audio completo di estensione ed eventuale percorso per raggiungerlo.

Nella prossima lezione inizieremo a parlare di canvas il disegno 2D di HTML5.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.