Al diseñar los sonidos de respuesta de Lingo Ladders, tuvimos que tomar una decisión importante: ¿descargábamos archivos de audio pesados (MP3/WAV) por la red o generábamos los sonidos mediante código en tiempo real?
Para ofrecer una experiencia 100 % libre de derechos, privada y sin latencia, construimos un motor de síntesis de audio con la Web Audio API nativa de HTML5. En este artículo os contamos cómo funcionan por dentro los sonidos retro de Lingo Ladders.
"La buena ingeniería web progresiva aprovecha los procesadores del dispositivo en vez de saturar el ancho de banda con descargas de archivos multimedia."
1. El peso de los archivos de audio
Las aplicaciones web habituales descargan sus archivos de audio por HTTP. Eso trae varios problemas:
- Consumo de ancho de banda: descargar incluso los efectos de sonido más sencillos añade megabytes a la carga inicial de una PWA.
- Latencia y retrasos: descargar o almacenar el audio en búfer crea un retraso notable entre el clic del jugador y el sonido, y se pierde la sensación táctil.
- Riesgos de derechos de autor: alojar clips pregrabados expone a los desarrolladores a problemas legales de licencias.
2. Síntesis de ondas mediante código
En vez de archivos, Lingo Ladders usa la CPU para sintetizar ondas de frecuencia dentro de LingoAudioManager (libraries/audio-manager.js).
- Creamos OscillatorNodes y GainNodes locales para controlar las ondas sobre la marcha.
- Por ejemplo, el sonido de acierto es un arpegio rápido de do mayor con cuatro tonos sinusoidales puros:
- C5 (523,25 Hz) → E5 (659,25 Hz) → G5 (783,99 Hz) → C6 (1046,50 Hz).
- Cada frecuencia tiene una curva de ganancia exponencial precisa para evitar chasquidos bruscos. El resultado es un timbre retro cálido y limpio.
3. Vibrato por modulación FM
Para la fanfarria de victoria fuimos un paso más allá. Creamos un oscilador modulador independiente de baja frecuencia (a 5,5 Hz) y conectamos su salida directamente a las entradas de frecuencia de las notas principales del sintetizador.
Así se genera un vibrato en tiempo real, con aire analógico, que da más cuerpo armónico al acorde final. Un triunfo retro rico y gratificante que pesa exactamente cero bytes en descargas de archivos.