Audio reactivo sin librerías: FFT a mano en el navegador

La demo de audio reactivo que publicamos en el reto anterior funcionaba, sí, pero apoyada en una librería de visualización que hacía la mitad del trabajo por nosotros. Este post rehace el camino desde cero: conectar el micrófono, entender qué devuelve AnalyserNode y dibujar el espectro en un canvas 2D sin intermediarios.

Qué es realmente un AnalyserNode

Cuando llamas a createAnalyser() sobre un AudioContext, no obtienes un visualizador: obtienes un nodo que expone dos buffers. Uno contiene la forma de onda en el dominio del tiempo, el otro la magnitud por banda de frecuencia. El segundo es el que nos interesa, y llega ya transformado por una FFT interna que el navegador ejecuta en cada bloque de audio.

El parámetro fftSize define cuántas muestras se analizan por bloque. Valores habituales: 2048 para voz, 4096 si quieres más resolución en graves. El array resultante tiene fftSize / 2 bins, cada uno con un valor entre 0 y 255.

Por qué los bins no se ven como suenan

Los bins vienen en escala lineal: el bin 0 cubre de 0 a sampleRate / fftSize hercios, el bin 1 el siguiente tramo, y así. El oído, en cambio, percibe las frecuencias de forma logarítmica. Si dibujas los bins tal cual, los graves ocupan un píxel y los agudos se estiran hasta parecer ruido. La solución más simple es agrupar bins en bandas logarítmicas antes de pintar.

Latencia en Firefox y el bucle de dibujo

En Firefox, si dibujas dentro de un setInterval a 60 Hz, el espectro va un frame o dos por detrás del sonido. La corrección es usar requestAnimationFrame y leer el buffer justo antes de pintar, no después. Con eso la sensación de sincronía mejora bastante sin tocar nada más.

El mismo buffer de magnitudes se puede subir a un shader como textura de datos y usarlo para deformar geometría. Ahí es donde el ejercicio deja de ser un vúmetro y empieza a parecerse a las piezas generativas que compartimos en la galería.