Tra i tanti e ricchi strumenti che HTML5 mette a disposizione dei developer uno dei posti d'onore spetta alla gestione dell'audio sulle pagine web, ormai nativo per quasi tutti i browser.

In questo tutorial vedremo come usare Buzz, una piccola libreria che rende la gestione dei suoni sul nostro sito molto semplice e veloce

Musica maestro!

Partiamo ovviamente scaricando la libreria dalla pagina ufficiale: http://buzz.jaysalvat.com/

La funzionalità di base è molto semplice.

Per prima cosa includiamo la libreria (e jQuery) nella nostra pagina:

<script src="jquery.min.js" language="javascript"></script><br /><script src="buzz.min.js" language="javascript"></script>

Da questo momento possiamo usare le sue chiamate. Prima carichiamo un suono, così:

var mySound = new buzz.sound( "/path/file/suono", {<br />    formats: [ "ogg", "mp3", "aac" ]<br />});

e poi lo eseguiamo con "play":

mySound.play();

Formati

La cosa da notare in questo semplice pezzo di codice è la parte sui formati: come potete vedere dalla tabella seguente i diversi browser riconoscono ed eseguono formati diversi, a volte incompatibili fra di loro:

Per essere sicuri che la maggior parte dei browser eseguano correttamente i nostri suoni dobbiamo allora fornirli in formati diversi – quantomeno in MP3 (Chrome, Safari, IE e gli smartphones) e OGG (Firefox).

Usando questa sintassi quando carichiamo un suono su Buzz:

var mySound = new buzz.sound( "/path/file/suono", {<br />    formats: [ "ogg", "mp3", "aac" ]<br />});

noi stiamo quindi dicendo alla libreria di prendere i file:

/path/file/suono.mp3<br />/path/file/suono.ogg<br />/path/file/suono.aac

Sarà poi la libreria (e HTML5) di eseguire il file giusto sui differenti browser.

Tra l'altro, per chi ne ha bisogno, c'è un comodissimo convertitore online di piccoli file audio qui: http://media.io/it/

E come fanno gli animali?

Mettiamo tutto insieme e vediamo un po' di imparare che verso fanno gli animali:

 

Ed ecco qua l'HTML di questo lavoretto:

<ul class="sounds"><br />    <li><br />      <img src="elephant.jpg" data-sound="elephant"><br />    </li><br />    <li><br />      <img src="cat.jpg" data-sound="cat"><br />    </li><br />    <li><br />      <img src="tyrannosaurus.jpg" data-sound="tyrannosaurus"><br />    </li><br />    <li><br />      <img src="burp.jpg" data-sound="burp"><br />    </li><br /></ul>

E il JavaScript:

<script src="jquery.min.js" language="javascript"></script><br /><script src="buzz.min.js" language="javascript"></script><br /><br /><script language="javascript">  <br />  $(document).ready(function() {<br />    var sounds = [];<br />    // preload all sounds<br />    $('li img').each(function(i) {<br />        sounds[$(this).attr('data-sound')] = new buzz.sound($(this).attr('data-sound'), {<br />          formats: [ "ogg", "mp3" ],<br />          preload: true,<br />          loop: false<br />        });<br />    });     <br /><br />    $('li img').click(function() {<br />        var $this = $(this);<br />        $(this).fadeTo('fast', 1);<br />        sounds[$(this).attr('data-sound')].play().bind("ended", function () {<br />           $this.fadeTo('fast', 0.5);<br />        });<br />    });<br />  });<br /><br /></script>

Trovate la documentazione completa e tutte le info che volete su http://buzz.jaysalvat.com/. Alla prossima! :)

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