Experimentos con la Web Audio API de JavaScript

La Web Audio API es una interfaz que nos permite generar y modificar flujos de audio. Vamos, crear sonido con JavaScript desde el navegador (o incluso música si eres un virtuoso).

Esta tecnología lleva bastante tiempo disponible (el primer borrador de la W3C data de 2011), y desde 2014 su soporte está incluído en la mayoría de navegadores web. Varias librerías JavaScript demuestran el potencial de esta API, tales como Tone.js o howler.js, y hay web apps que hacen un uso impresionante del sonido sintetizado: véase Plink o Euphony.

Para empezar a trabajar con la Web Audio API hay primero que entender como funciona: toda operación para manipular sonido se realiza dentro de un contexto sonido, el cual está diseñado como un sistema de nodos interconectados que transforman uno o varios flujos de sonido. Desde un nodo origen se conectan cualquier número de nodos de audio que procesan el flujo de audio hasta que finalmente se conecta a un nodo de destino. El flujo de audio pasa por todos estos nodos donde es procesado, hasta terminar en el nodo de destino que puede representar la salida por los altavoces o que se guarde en un archivo. Este conjunto de nodos enlazados se conoce como audio routing graph.

Traducido a JavaScript, todo empieza con el objeto AudioContext: el contexto de audio que nos permite crear nodos y procesar un flujo de sonido.

// Safari todavía no ha implementado correctamente la API,
// así que tenemos que utilizar la versión con prefijo
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

A continuación creamos un par de nodos para procesar el flujo de audio: un nodo para crear un tono constante a 240 Hz (OscillatorNode), y otro nodo para controlar la ganancia (GainNode).

const oscillatorNode = audioCtx.createOscillator();
oscillatorNode.frequency.setValueAtTime(240, audioCtx.currentTime);

const gainNode = audioCtx.createGain();
gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime);

Y los conectaremos entre ellos y al nodo de destino por defecto de AudioContext (normalmente es la salida de audio de tu ordenador).

oscillatorNode.connect(gainNode);
gainNode.connect(audioCtx.destination);

Finalmente iniciamos el nodo oscilador y nos preparamos para escuchar un sonido monótono bastante insufrible. Pero ¡eh, estamos creando música!

oscillatorNode.start();

(Puedes ver este código en funcionamento aquí. Asegúrate de bajar el volumen de tus altavoces.)

No voy a profundizar mucho más en la API ya que hay numerosas referencias y tutoriales que la explican con mucho detalle, empezando por toda esta sección en la fantástica MDN, o este artículo en CSS-Tricks, o este otro genial artículo en HTML5 Rocks (de los primeros que explicaron la Web Audio API).

El experimento

El ejercicio consiste, tras estudiar la Web Audio API, en crear sonidos sintéticos desde una sencilla aplicación web utilizando un único flujo de audio, pero con libertad para cambiar la mayor cantidad de parámetros posibles. Al no haber estudiado música en mi vida, Hulio, la tarea fue un poco díficil por algunos nuevos conceptos (por lo que recomiendo seguir los enlaces que encontrarás más abajo). Como ayuda, cada párametro que se puede modificar viene acompañado de un breve texto descriptivo para saber qué es lo que estamos tocando.

El resultado es una pequeña aplicación web que genera sonidos utilizando como origen un OscillatorNode (para crear un tono constante) o un Audio​Buffer​Source​Node (para generar ruido blanco), al que se le aplica un envolvente acústico para hacerlo más natural y filtros personalizables como nodos intermedios. El sonido generado se destina bien a los altavoces del sistema, o bien a un objeto Blob que el usuario puede guardar en su máquina como un archivo OGG.

Puedes jugar con el sintetizador aquí: https://raohmaru.github.io/simple-audio-synthesizer/src/ 🎵

O probar el piano electrónico 🎹 .

Por supuesto, si tienes curiosidad por ver el código fuente, lo encontrarás en mi repositorio de GitHub.

Referencias

• Nine Components of Sound
• JavaScript Systems Music
• Recreating legendary 8-bit games music with Web Audio API
• Developing Game Audio with the Web Audio API
• Electric Guitar Synth in HTML5
• Synthesising Drum Sounds with the Web Audio API

Imagen de cabecera creada por freepik.