SFX Forge
Sintetizador parametrico de efectos de sonido para videojuegos
SFX Forge es un sintetizador de efectos de sonido al estilo SFXR/BFXR que funciona integramente en el navegador con Web Audio API. Disena sonidos desde cero ajustando la forma de onda (sine, square, sawtooth, triangle o ruido blanco) y modelandolos con controles profesionales: envolvente de volumen ADSR, barrido de tono (pitch slide), vibrato LFO y filtro paso bajo. Cada parametro se controla con sliders y muestra su valor en tiempo real.
Incluye presets listos para GameDev (Jump, Laser, Coin y Explosion) que se cargan y suenan al instante, ademas de un boton Mutate que genera variaciones aleatorias del sonido actual para poblar tu juego de efectos sin repetir. Cuando tengas el sonido perfecto, exportalo a archivo de audio con un clic mediante MediaRecorder.
Sin dependencias externas, sin archivos de sonido y sin instalar nada: todo el audio se genera matematicamente en el momento. Interfaz oscura tipo DAW pensada para iterar rapido.
CC0 1.0 · Lo que crees con esta herramienta es de dominio publico: usalo libremente, incluso con fines comerciales, sin necesidad de atribucion.
Tu tarea es programar un componente React completamente funcional y en un solo archivo (compatible con Claude Artifacts) que implemente un "Sintetizador Paramétrico de Efectos de Sonido (SFX)" similar al clásico SFXR/BFXR.
Especificaciones Técnicas y Stack:
- React (Hooks: useState, useEffect, useRef, useCallback).
- Tailwind CSS para estilos y Lucide React para iconografía.
- Web Audio API nativa (prohibido estrictamente usar etiquetas <audio> o archivos externos).
- OfflineAudioContext para el renderizado de audio y un codificador WAV propio para la exportación (no uses MediaRecorder: produce formatos comprimidos como .webm/opus y no permite obtener .wav PCM nativo).
Motor de Audio y Síntesis DSP:
Construye un pipeline de síntesis robusto que incluya:
- Oscilador Principal: Seleccionable entre Sine, Square, Sawtooth, Triangle y White Noise (buffer de ruido generado matemáticamente).
- Ruido reproducible con semilla: el ruido blanco NO debe usar Math.random() directo. Implementa un PRNG con semilla (p. ej. mulberry32) y genera el buffer de ruido a partir de una semilla almacenada en un useRef. La misma semilla debe producir exactamente los mismos samples, de modo que lo exportado sea idéntico a lo escuchado (ver sección de Exportación).
- Envolvente de Volumen (ADSR): Controles de Attack, Decay, Sustain y Release aplicados a un GainNode usando métodos precisos de programación en el tiempo (linearRampToValueAtTime, etc.).
- Envolvente de Frecuencia (Pitch Slide): Controles de Frecuencia Inicial, Frecuencia Final y Tiempo de Caída (Slide Time) aplicados al oscillator.frequency.
- Vibrato (LFO): Controles de Velocidad (Rate) y Profundidad (Depth) modulando la frecuencia del oscilador.
- Filtro: Un filtro Paso Bajo (Lowpass Filter) con control de Frecuencia de Corte (Cutoff).
Arquitectura del grafo de síntesis (Crítico):
La función que construye el grafo de nodos (osciladores, ADSR, LFO, filtro, ruido) debe ser contexto-agnóstica: la misma función debe operar tanto sobre un AudioContext en vivo (para la reproducción) como sobre un OfflineAudioContext (para la exportación), garantizando que ambas rutas usan matemáticas de síntesis idénticas. Ten en cuenta que un AudioBuffer de ruido no puede compartirse entre contextos: genera el buffer dentro de cada contexto usando la semilla almacenada.
Sistema de Presets para GameDev (Crítico):
Implementa botones predefinidos que, al ser pulsados, hagan dos cosas simultáneamente: actualizar visualmente todos los sliders al nuevo estado y reproducir el sonido inmediatamente.
- "Jump" (Salto): Onda cuadrada, frecuencia inicial media subiendo rápidamente a una frecuencia alta, ataque rápido, sustain bajo, release corto.
- "Laser / Shoot": Onda diente de sierra (sawtooth) o cuadrada, pitch drop muy agresivo (de agudo a grave rápido), decay muy rápido.
- "Coin / PowerUp": Frecuencias agudas, ataque nulo, decaimiento medio. (Idealmente simular un arpegio muy rápido o un salto de nota brusco).
- "Explosion": Ruido blanco (White Noise), ataque instantáneo, decaimiento largo, filtro paso bajo activo cayendo lentamente.
- "Mutate" (Mutar): Aplica una variación aleatoria de +/- 15% a los valores actuales de todos los sliders para generar variaciones del mismo efecto.
Lógica de Reproducción y Exportación:
- Botón principal de "Play Sound". En cada reproducción se genera una nueva semilla de ruido aleatoria y se almacena en el useRef, de modo que ese disparo queda "fijado".
- Botón de "Export WAV". Debe reutilizar la semilla del último Play (sin regenerarla), reconstruir el mismo grafo de síntesis dentro de un OfflineAudioContext, renderizarlo con startRendering() (más rápido que en tiempo real), codificar el AudioBuffer resultante a WAV PCM 16-bit mediante un codificador propio (escritura manual de la cabecera RIFF/WAVE con DataView), generar un Blob de tipo audio/wav y forzar automáticamente la descarga del archivo .wav. El resultado debe ser bit a bit el mismo sonido que se acaba de escuchar. Muestra un estado de carga ("Rendering…") mientras se procesa la exportación.
Arquitectura de Interfaz y UI/UX (Estética DAW Profesional):
- Paleta: Interfaz oscura y profesional (tipo Ableton, FL Studio o interfaz Sci-Fi), usando grises oscuros (slate/zinc) y acentos de color vibrantes (ej. cian, ámbar o verde neón) para los controles activos.
- Layout:
- Barra lateral izquierda o superior: Botones de Presets ("Jump", "Laser", etc.), botón de "Mutate" y selector de forma de onda.
- Panel central: Rejilla estructurada lógicamente con los Sliders (ADSR, Pitch, Vibrato, Filtros). Cada slider debe mostrar su valor numérico actual.
- Panel de acción: Botones grandes y destacados de "Play Sound" y "Export WAV".