Web Audio API

Con la llegada de HTML5 y su etiqueta dejamos atrás los tiempos en que para poder usar sonido en una página Web había que tirar de plugins, tales como Flash o QuickTime. Con esta API JavaScript se da un paso más allá, permitiéndonos tanto el proceso como la síntesis de audio, sin tener que limitarnos sólo a la reproducción básica de este en streaming.

La Web demandaba un desarrollo de estas características, para poder implementar funcionalidades que sí hemos encontrado en aplicaciones de escritorio desde hace mucho tiempo: filtros, mezcla, proceso de audio,... Web Audio API es quizá la respuesta a dicha demanda. Ahora se podrán implementar aplicaciones más sofisticadas, como aquellas que encontramos en los motores de juego, o en aplicaciones específicas para audio similares a las que nos encontramos en otros entornos.

Se han tenido en mente muchos casos de uso para el desarrollo de esta API. En principio se pretendía que pudiera soportarse cualquiera de ellos, con un motor optimizado, escrito en C++, y controlado a través de JavaScript. No era el objetivo inicial poder llegar a implementar aplicaciones como Cubase, Logic, etc... pero sí poder soportar funcionalidades de juegos, que son bastante complejas, incluidos aquellos que se basen en la música, como complemento a las funciones gráficas avanzadas que nos dan otros productos como WebGL. Aunque todavía no se podrán implementar, se ha diseñado Web Audio API de manera que sí se pueda hacer en un futuro próximo.

Características

Las características principales que soporta la API son:

• Ruteo modular: podemos ir ruteando las señales, a través de arquitecturas simples o complejas, que pasen por envíos y retornos, por ejemplo a efectos, mezclas y submezclas,...

• Sample-accurate scheduled sound playback: nos ofrece la posibilidad de reproducir sonido con baja latencia, sin retardo, para aplicaciones que requieran un alto grado de precisión temporal, o rítmica, como pueden ser los secuenciadores o cajas de ritmo. También nos permite la creación de efectos de forma dinámica.

• Automatización para parámetros de audio: esto nos permitirá colocar nuestros cambios en la linea de tiempo de forma automática, pudiendo crear efectos de fade-in/fade-out (bajar el volumen progresivamente, o subirlo), aplicación de efectos, paso por filtros, LFOs,...

• Manejo flexible de canales: todo flujo de audio, que se va ruteando a través de canales permitirá que estos se dividan y fusionen, es decir, con una misma señal podremos obtener más de un canal, y a la vez varios canales podrán fusionarse en uno sólo.

• Uso de elementos de medios: podemos usar elementos de audio y vídeo como fuentes para el proceso de audio, a través de un media element.

• Integración con WebRTC: podemos procesar audio que recibamos de una fuente remota, o enviar un stream de audio a un receptor remoto. Para ello usaremos MediaStream.

• Procesar audio directamente desde JavaScript: tanto el sintetizar audio, como procesarlo se puede hacer en tiempo real desde nuestro fuente JavaScript.

• Colocación del audio en el espacio: imprescindible para ciertos juegos 3D y para poder jugar con las coordenadas x y z del audio. Podremos panoramizar, usando para ello modelos como HRTF (Head Related Transfer Function), pass-through,... Podremos usar efectos como la atenuación en la distancia, conos de sonido, obstrucción/oclusión, efecto Doppler,...

• Motor de convolución: para que nos entendamos la convolución en audio se utiliza sobre todo para aplicar efectos de reverberación sobre el audio, que nos dan una sensación de espacialidad. Posibles efectos que podemos aplicar a una fuente dada con este motor serían: small/large room, cathedral, concert hall, cave, tunnel, hallway, forest, amphitheater, y otros efectos más extremos.

• Manejo de la dinámica: nos permite comprimir y limitar fuentes de audio para tener un control preciso de la dinámica del sonido.

• Análisis en tiempo real: nos proporciona un interface para poder obtener en tiempo real información en el rango de la frecuencia y el tiempo

• Filtros: nos proporciona un catálogo de filtros de uso común como pueden ser filtros paso bajo, paso alto, paso banda,...

• Efectos no lineales: también permite aplicar efectos no lineales como puede ocurrir con el caso de la distosión.

• Osciladores: como sabemos todo proceso de síntesis de sonido comienza por uno de estos elementos. Se encarga de generar el sonido, en forma de onda periódica.

AudioContext

La idea de esta API de alto nivel, para poder procesar y sintetizar audio en aplicaciones Web se basa en el concepto de nodos de audio (AudioNode), que serán los elementos que se interconectarán entre si para formar una cadena, cuyo resultado será el audio renderizado. Lo primero que deberemos definir es un contexto para estos nodos, donde se producirán todos los sonidos. Puede soportar varias fuentes de audio, con lo que sólo necesitaremos un contexto por cada aplicación de audio.

La forma de crear el contexto sería así:

Esta instancia del contexto ya nos permite acceder a un montón de métodos para crear nodos de audio, o manejar las preferencias globales de audio. Nos centraremos en los nodos de audio, ya que son elementos necesarios en la cadena que ya hemos citado.

Vamos a tener nodos de varios tipos:

• Nodos de origen: fuentes de sonido, buffers de audio, entradas de sonido en vivo, tags, osciladores, y procesadores JS.

• Nodos de modificación: como su propio nombre indica sirven para modificar el sonido: filtros, paneadores, procesadores JS, convoluciones,...

• Nodos de destino: las salidas de audio, o buffers de proceso offline.

Por tanto para generar una cadena de audio, generaremos los orígenes, los modificadores y los destinos y los conectaremos todos a través del método connect(). De la misma forma podremos desconectarlos con el método disconect(numeroPuertoSalida), y volverlos a conectar. Vamos que podemos crear las cadenas de forma dinámica:

Todo esto, nos permite una gran potencia, y crear distintas cadenas, asignar distintas rutas, etc... Lo iremos viendo en futuros artículos. Para terminar voy a poner un ejemplo completo de cómo se reproducirían dos sonidos almacenados en sendos ficheros con extensión wav:

Más info | Web Audio API: Latest published version | WebRTC | HRTF | Getting Started with Web Audio API | Web audio stylophone En Genbeta Dev | W3C. Estándares para aplicaciones Web en móviles: Febrero 2012