Audio HTML5, il tag e gli attributi

Link copiato negli appunti

La presenza del tag audio è naturale conseguenza dell'esistenza di video. Fra l'altro i due elementi si assomigliano molto, sia in materia di markup che di API, al punto che nelle specifiche sono raggruppati all'interno della definizione di HTML Media Elements. L'utilizzo del tag audio sottende però aspetti assolutamente originali ed interessanti; soprattutto quando utilizzato per arricchire con effetti sonori una struttura HTML classica.

Le specifiche

La rappresentazione a markup dell'elemento ricalca perfettamente quella del video, anche se vi sono meno attributi disponibili, vediamo un esempio:

<audio controls autoplay loop src="file_musicale.mp3">

In questo caso la definizione si risolve su di una singola linea e senza utilizzo del tag source perché è stato utilizzato l'attributo src, il cui compito è quello di evitare una scrittura troppo prolissa nel caso in cui il formato disponibile sia unico. Questo attributo anche se non è stato presentato nella lezione precedente è valido anche per il tag video, anche se a meno di un reale processo di unificazione dei codec ad oggi perde molta della sua utilità. In ogni caso la stessa definizione appena espressa si può scrivere anche nel formato esteso:

<audio controls autoplay loop>
  <source src="file_musicale.mp3" type="audio/mp3">
</audio>

Oltre agli attributi presentati nel codice qui sopra, deve essere citato anche preload; ognuno di questi è già stato illustrato nella lezione precedente e mantiene intatto il suo funzionamento anche su questo elemento. A differenza di video, l'elemento audio dispone anche di un proprio costruttore JavaScript, ecco la sintassi:

var audio = new Audio("file_musicale.mp3");

In questo modo è possibile utilizzare musiche ed effetti audio senza necessariamente creare l'elemento HTML né ricorrere a display:none o similari; tratteremo più approfonditamente di questo aspetto nella sezione dedicata all'esempio.

Per quanto riguarda invece le API e gli eventi associati a questo elemento l'elenco è pressoché congruente con quello dell'elemento video; le stesse funzioni play, pause, playbackRate, duration, currentTime e tutto quanto legato ai TimeRanges mantengono inalterato il proprio comportamento in quanto appartenenti al gruppo HTMLMediaElements al quale entrambi gli elementi fanno parte.

Un esempio

Sfruttiamo la possibilità di creare oggetti audio utilizzando il costruttore JavaScript per studiare un meccanismo che ci consenta di associare ad ogni bottone un suono predefinito da riprodurre al click. Ecco il markup che useremo all'interno del body della pagina:

<button type="button" data-effetto-audio="gatto_che_miagola.mp3" disabled>
  Il verso del gatto...
</button>
<button type="button" data-effetto-audio="cane_che_abbaia.mp3" disabled>
  Il verso del cane...
</button>

L'utilizzo degli attributi data-* ci consente in modo elegante di aggiungere un'informazione caratterizzante al pulsante, senza creare strane sovrastrutture. Ora il codice JavaScript dovrà occuparsi di scandagliare la pagina alla ricerca di pulsanti con suono associato e creare un oggetto audio con la sorgente che punti all'attributo che abbiamo definito. L'evento canplaythrough, verrà utilizzato per intercettare il momento in cui un dato oggetto audio ritiene di aver collezionato dati sufficienti per garantire la riproduzione dell'intero brano. All'accadere di tale evento il pulsante associato al suono verrà abilitato e un listener in ascolto sull'evento click garantirà l'esecuzione del suono alla pressione del bottone. Ecco il codice della demo completa:

<!doctype html>
<html>
<head>
  <title>Il suono degli animali</title>
  <script>
    init = function(evento){
      var bottoni = document.querySelectorAll('button');
      for(var b=0; b < bottoni.length; b ++){
        var effetto_audio = bottoni[b].dataset.effettoAudio;
        if(effetto_audio != ""){
          var audio = new Audio(effetto_audio);
          audio.bottone_di_riferimento = bottoni[b];
          audio.addEventListener('canplaythrough',
            function(evento_load){
              var bottone = evento_load.target.bottone_di_riferimento;
              bottone.disabled = false;
              bottone.audio_di_riferimento = evento_load.target;
              bottone.addEventListener('click',
                function(evento_click){
                  evento_click.target.audio_di_riferimento.play();
                }
              );
            }
          );
        }
      }
    }
window.addEventListener('load',init); </script>
</head>
<body>
<button type="button" data-effetto-audio="gatto_che_miagola.mp3" disabled>
Il verso del gatto...
</button>
<button type="button" data-effetto-audio="cane_che_abbaia.mp3" disabled>
Il verso del cane...
</button>
</body>
</html>

Il codice sembra a prima vista complicato ma è facilmente decomponibile in 3 fasi principali:

Un ciclo for viene eseguito al caricamento della pagina su tutti gli elementi di tipo button; per ognuno di questi elementi viene istanziato un oggetto Audio. Su tale oggetto viene memorizzato un riferimento al bottone associato tramite la variabile bottone_di_riferimento e viene registrato un handler sull'evento canplaythrough.
Quando un oggetto Audio colleziona un buffer di dati ritenuto dal browser tale da consentire la riproduzione integrale del suono, l'evento canplaythrough viene lanciato ed intercettato dalla nostra funzione che a quel punto crea, con un meccanismo simile al punto precedente, un handler sul pulsante presente nella variabile bottone_di_riferimento da attivarsi alla pressione dello stesso. Inoltre il pulsante viene abilitato (bottone.disabled=false) in modo da poter ricevere i click degli utenti.
Il click dell'utente su di un pulsante attiva l'handler appena definito che non fa altro che riprodurre il suono presente nell'oggetto Audio ad esso associato.

Eseguiamo l'applicazione appena sviluppata e sinceriamoci del suo corretto funzionamento: ecco l'esempio.

Conclusioni

L'elemento che abbiamo illustrato in questa sezione corre di pari passo con l'implementazione HTML5 del video, dal quale, abbiamo visto, eredita pressoché la totalità delle proprietà. Nonostante questo l'utilizzo dell'elemento audio si presta a scenari molto più variegati rispetto a quanto ci si potrebbe immaginare: parte di questa interessante flessibilità risiede proprio nella sua predisposizione ad essere creato direttamente da JavaScript.