Pulse
Estudio audiovisual interactivo que vive íntegramente en una pestaña del navegador. Combina un secuenciador por pasos de 5 pistas, síntesis aditiva y sustractiva modelada a mano sobre la Web Audio API nativa (sin librerías externas ni ficheros de audio descargados), y un motor visual en WebGL con fragment shaders GLSL modulados en tiempo real por un analizador de espectro de 3 bandas.
El reto
El reto
La mayoría de experimentos musicales en la web recurren a frameworks pesados como Tone.js o reproducen samples pregrabados (archivos MP3/WAV) que inflan la transferencia de red y limitan la flexibilidad tímbrica. Del lado visual, delegar en librerías masivas de 3D suele acarrear caídas drásticas de frames e impedir un renderizado de bajo nivel optimizado.
El objetivo fue construir Pulse: un estudio audiovisual completo, determinista e hiperligero que funcionara con cero dependencias de runtime, cero samples descargados (100% síntesis procedural en tiempo real) y shaders GLSL puros ejecutados en WebGL, alcanzando un estándar de calidad gráfica y sonora digno de producción sin superar los ~128 KB de peso total servido.
Lo que hice
Lo que hice
Motor de síntesis nativo (Web Audio): Diseñé desde cero la arquitectura de audio para 5 voces independientes: tres voces tonales sustractivas (bajo con drive y filtro paso-bajo, lead brillante y pad envolvente con generadores de envolvente ADSR) más percusión procedural (bombo sintetizado con caída de tono exponencial y hi-hat metálico a base de ruido filtrado y decay percusivo). Implementé una cadena maestra con chorus/delay pseudo-estéreo, reverberación por convolución algorítmica y compresor/limitador de dinámica.
Temporizador de alta precisión (look-ahead scheduler): Para evitar el jitter característico de setInterval y requestAnimationFrame, implementé un despachador con temporización anticipada gobernado directamente por el reloj hardware del AudioContext, garantizando sincronización exacta a 120+ BPM independientemente de la carga de renderizado del hilo principal.
Shaders WebGL y análisis espectral: Desarrollé 3 modos visuales reactivos (túnel de ruido con 3D Value Noise adaptado de Inigo Quilez, ondas de impacto radiales y campo de partículas) comunicados mediante uniforms estandarizados (u_resolution, u_time, u_bands, u_intensity). Un módulo de análisis matemático (FFT con AnalyserNode) desacopla el espectro en tres bandas (graves, medios, agudos) con envolventes asimétricas de ataque rápido y caída lenta.
Optimización y accesibilidad extrema: Creé un ResolutionController con histéresis que ajusta dinámicamente la resolución interna del canvas si los FPS caen de 45, y pospuse la inicialización del contexto WebGL hasta la interacción inicial, reduciendo el TBT a 0 ms. La interfaz implementa soporte nativo para lectores de pantalla mediante una matriz semántica accesible, contraste auditado, soporte prefers-reduced-motion y serialización de patrones compartibles en el hash de la URL.
Resultado
Resultado
Pulse ofrece una experiencia artística instantánea, sin fricción y de alto impacto visual y sonoro, disponible públicamente en pulse-blond-chi.vercel.app y con código abierto en GitHub (moisesvalero/pulse).
El proyecto logró puntuaciones casi perfectas en Lighthouse (99 Rendimiento, 100 Accesibilidad, 100 Buenas Prácticas, 100 SEO), 0 ms de Total Blocking Time, 0 dependencias de runtime y una cobertura de 140 tests automatizados que certifican tanto la coherencia del estado como la estabilidad del grafo de audio.
Stack tecnológico