Abans de l’aparició de la versió 5 d’HTML, si es volia incloure àudio en una pàgina web, no quedaven gaires opcions a part de fer sevir tecnologia Flash, propietària d’Adobe. Amb HTML5 s’introdueixen noves etiquetes que anuncien la incorporació d’àudio i vídeo a la web, sense necessitat de cap tipus de connector (plug-in), ja que el navegador les entén. Fins a quin punt és cert, però?
L’etiqueta audio
L’especificació d’HTML5 introdueix l’etiqueta (tag) audio, de manera anàloga a l’etiqueta video, juntament amb funcionalitats bàsiques de reproducció d’arxius d’àudio pregravat i consulta d’atributs senzills, com la durada. Gràcies a aquest fet, ja no cal cap connector per a manejar so (per a fer play i stop, per exemple) en la nostra pàgina web.
N’hi ha prou?
Amb les funcionalitats associades a l’etiqueta audio, plantejar-se fer, per exemple, un piano que soni en temps real sobre el mateix navegador és una tasca que, si bé és resoluble, no és trivial. La idea és fer-ho a partir de fitxers de so curts, sia preconstruïts o construint-los mentre s’executa la pàgina web (http://codebase.es/riffwave/). Aquesta tècnica feia curt en un altre tipus de tasques, com l’aplicació de filtres o efectes personalitzats al so que estigui capturant el micròfon, per exemple, ja que no es pot partir d’un arxiu pregravat, i el fet de concatenar en forma d’arxius curts l’àudio que va arribant pel micròfon no donava bons resultats (http://acko.net/blog/javascript-audio-synthesis-with-html-5/).
Amb l’objectiu d’expandir les funcionalitats del treball amb so per mitjà del navegador, el W3C crea l’Audio Working Group (http://www.w3.org/2011/audio/) el març del 2011. Aquest grup té en compte el treball fet per l’equip de Mozilla, que va desenvolupar l’Audio Data API (https://wiki.mozilla.org/audio_data_api), una especificació no estàndard per al seu navegador Firefox. Un primer resultat de l’Audio Working Group ha estat la creació del Web Audio API (http://www.w3.org/tr/webaudio/), en desenvolupament avui dia i disponible en el Chrome a partir de la versió 14 activant prèviament l’indicador de seguiment (flag) corresponent (s’ha d’activar “Entrada d’àudio web” introduint about:flags a la barra d’adreces del Chrome). Aquesta especificació permet processar i sintetitzar àudio des del navegador mateix.
Biblioteques associades
Hi ha una biblioteca de codi obert, Audiolet (http://oampo.github.com/audiolet/), que simplifica l’ús de les dues API d’àudio anteriors, integrant-les en unes mateixes instruccions i simplificant-ne l’ús. Com tota simplificació, es perd certa llibertat de creació, però es guanya en velocitat de desenvolupament.
Es poden trobar més biblioteques a la web de Mozilla (https://wiki.mozilla.org/Audio_Data_API#JavaScript_Audio_Libraries), i també exemples demostratius (en aquest cas, lligats a l’Audio Data API de Mozilla).
Estàndard no tancat
La Web Audio API és una especificació en esborrany. No està acabada i no l’accepten tots els navegadors. De fet, només l’entenen el Chrome i el Safari, mentre que el Mozilla té el seu Audio Data API i l’Explorer no s’hi pronuncia, per esmentar alguns navegadors. D’aquesta manera, solament estan disponibles de manera generalitzada les possibilitats bàsiques definides per l’etiqueta audio.
Tot i això, es desenvolupa
Encara que no hi ha un estàndard tancat ni acabat, hi ha diferents exemples de síntesi d’àudio per mitjà del navegador (Chrome o Safari) (http://chromium.googlecode.com/svn/trunk/samples/audio/index.html) o els exemples esmentats a la web d’Audiolet (http://oampo.github.com/audiolet/).
És un desenvolupament costós, ja que un canvi en l’especificació implica canviar el desenvolupament per a fer-lo compatible amb les versions actualitzades dels navegadors que funcionen amb aquesta especificació.
Per saber-ne més …
Podeu consultar informació completa i extensa sobre l’estat de definició de la Web Audio API, per a manejar el so, a http://www.w3.org/tr/webaudio/.
Podeu trobar un bon article que explica les possibilitats de la Web Audio API a http://www.html5rocks.com/en/tutorials/webaudio/intro/?redirect_from_locale=es.