Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

HTML5: il tag Audio.

Scritto da Fare-internet il 2 novembre 2010 condividi condividi

AudioL’HTML5 oltre al tag video introduce un alro nuovo tag, il tag audio. La funzione di tale tag è abbastanza ovvia, consente l’inserimento di file sonori all’interno delle pagine web.

Anche qui l’idea di fondo è quella di separare l’esecuzione di file audio da eventuali plugin (sempre i soliti: Flash Player, QuickTime, Media Player e così via).
L’utilizzo del tag è molto semplce, si definisce mediante l’attributo src il file sorgente ed il gioca è fatto (questa è la versione minimale).

Ecco un semplice esempio:

<audio src="audio.ogg" controls="controls">
Il tuo browser non supporta il tag audio
</audio>


Il significato è abbastanza evidente: carichiamo il file audio.ogg e lo visualizziamo con la barra di controllo (es play/pause), se il browser utilizzato non supporta questo tag, verra mostrato il messaggio Il tuo browser non supporta il tag audio.

Anche in questo caso però non è stato ottenuta una standardizzazione di formati e il risultato è che i principali browser supportano formati audio diversi. I formati in questione sono tre:

  • ogg: supportato da Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3.0
  • mp3: supportato da Chrome 3.0, Safari 3.0
  • wav: supportato da Firefox 3.5, Opera 10.5, Safari 3.0

Come avrete osservato Internet Explorer 8 non supporta nessun formato, vedremo in IE 9 cosa accadrà.
Dato questo multiformato e che non due qualsiasi dei formati copriamo tutti i browser sarà buona norma inserire i file audio in questo modo:

<audio controls="controls">
     <source src="audio.ogg" type="audio/ogg" />
     <source src="audio.mp3" type="audio/mpeg" />
Il tuo browser non supporta il tag audio
</audio>

Come per il tag video abbiamo a disposizone alcuni attributi per gestire i file audio:

  • autoplay=”autoplay” : il file parte in automatico
  • loop=”loop” : il file ricomincia da capo quando finisce
  • preload=”preload” : inizia il preload del file (ignorato in caso di autoplay
Tag: , ,  

Twitter