Sonido con JavaScript: cómo fabricar sonidos sin un solo archivo de audio

Si entrás a la intro de mi portfolio con el sonido activado, vas a escuchar un meteorito que pasa zumbando, un ambiente espacial que respira, radios con estática y hasta las “voces” de los personajes. Lo curioso es que no hay ni un solo archivo de audio detrás: todo se fabrica en el navegador, en tiempo real, con JavaScript.

La idea: el navegador como sintetizador

Los navegadores traen una herramienta llamada Web Audio. Funciona como un estudio de sonido en miniatura: hay generadores de tono (osciladores), generadores de ruido, filtros que dejan pasar graves o agudos y controles de volumen. Conectándolos como cables en una consola, se puede crear casi cualquier sonido.

Un ejemplo para probar

Abrí la consola del navegador (F12), pegá esto y apretá Enter:

const ctx = new AudioContext();
const tono = ctx.createOscillator();
const vol = ctx.createGain();
tono.frequency.value = 440;
tono.connect(vol).connect(ctx.destination);
vol.gain.setValueAtTime(0.3, ctx.currentTime);
vol.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 1);
tono.start();
tono.stop(ctx.currentTime + 1);

Vas a escuchar un “piiin” que se apaga en un segundo. Cambiá el 440 por 110 y suena grave; cambiá el tipo de onda con tono.type = "square" y suena a videojuego retro. Así, de a poco, se arman instrumentos.

Las recetas de la intro

Cada sonido del portfolio es una receta de estas piezas:

• El meteorito: ruido filtrado cuyo tono baja mientras se aleja, imitando el efecto que escuchás cuando pasa una ambulancia.
• El ambiente del espacio: tres tonos graves apenas desafinados entre sí y un filtro que se abre y se cierra lento, para que “respire”.
• Las voces de los personajes: una síntesis que imita las vocales humanas, sin palabras reales, al estilo de los personajes de los juegos clásicos.

Además, los sonidos se ubican en el espacio 3D: si un objeto está a tu izquierda, lo escuchás a la izquierda.

Por qué hacerlo así

Los sonidos fabricados en el momento no pesan nada para descargar, pueden cambiar según lo que pasa en pantalla y nunca suenan exactamente igual dos veces. Es una forma de darle vida a una web que muy pocos sitios aprovechan.