Una delle grosse novità di HTML5 è il tag audio, ovvero il tag che consente di gestire in maniera autonoma e nativa – senza bisogno di plugin esterni – il sonore delle nostre pagine e applicazioni web. In questo tutorial introduttivo vogliamo presentarvi la sua "evoluzione", ovvero Web Audio API, un set di funzioni JavaScript che rendono il nostro browser un vero e proprio stereo e che danno a noi developer il controllo pressochè totale dell'audio dei nostri siti e giochi.

Una premessa importante: per ora (Aprile 2012) queste funzionalità sono disponibili solo su browser WebKit, e dunque solo su Google Chrome e Safari.

AudioContext e Buffer

Un po' come accade per canvas, anche nel caso di Web Audio API dobbiamo prima di tutto creare un "contesto" all'interno del quale inserire e suonare i nostri effetti sonori e note. Per creare un context basta un:

try {<br />        context = new webkitAudioContext();<br />    } catch(e) {<br />        alert('Web Audio API non è supportato in questo browser');<br />    }

Una volta che abbiamo creato il contesto dobbiamo caricare nel "buffer" i suoni che vogliamo eseguire. Questa operazione può essere fatta usando una chiamata AJAX (asincrona, così non blocca il nostro gioco o la nostra web app mentre i suoni caricano). Una volta che questo suono sia stato caricato possiamo "suonarlo":

function suonaSuono(buffer) {<br />         var source = context.createBufferSource(); // crea il buffer<br />         source.buffer = buffer;                    // carica nel buffer il suono che vogliamo usare<br />         source.connect(context.destination);       // collega la sorgente al contensto (le "casse")<br />         source.noteOn(0);                          // emette il suono ora (0)<br />    }

E poi?

Come potete immaginare attraverso questi due semplici esempi abbiamo solo dato un'occhiata estremamente superficiale a questo tema. Con questo articolo abbiamo però solo voluto suscitare un po' di interesse nei confronti di Web Audio API, uno strumento potentissimo per l'audio dei giochi HTML5, ad esempio, ma che purtroppo soffre del solito problema di queste tecnologie: la mancanza di standardizazione.

Per ora, dunque, vi indichiamo una serie di documenti per approfondire l'argomento: attendiamo i vostri commenti e la vostra dimostrazione di interesse per proseguire nella nostra serie di tutorial su Web Audio API!

https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html: la specifica "ufficiale" del W3C
http://chromium.googlecode.com/svn/trunk/samples/audio/index.html: esempi e demo da Google
http://www.html5rocks.com/en/tutorials/webaudio/intro/: il tutorial introduttivo su HTML5 Rocks

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis