Al diseñar los sonidos de respuesta de Lingo Ladders, tuvimos que tomar una decisión importante: ¿descargamos archivos de audio pesados (MP3/WAV) por la red o generamos los sonidos con código en tiempo real?
Para ofrecer una experiencia 100 % libre de regalías, privada y sin latencia, construimos un motor de síntesis de audio con la Web Audio API nativa de HTML5. En este artículo te contamos cómo funcionan por dentro los sonidos retro de Lingo Ladders.
"La buena ingeniería web progresiva aprovecha los procesadores del dispositivo en lugar de saturar el ancho de banda con descargas de archivos multimedia."
1. El peso de los archivos de audio
Las apps web comunes descargan sus archivos de audio por HTTP. Eso trae varios problemas:
- Consumo de ancho de banda: descargar hasta los efectos de sonido más simples suma megabytes a la carga inicial de una PWA.
- Latencia y demoras: descargar o cargar 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 con código
En lugar 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.25Hz) → E5 (659.25Hz) → G5 (783.99Hz) → C6 (1046.50Hz).
- Cada frecuencia tiene una curva de ganancia exponencial precisa para evitar chasquidos bruscos. El resultado es una campanita retro cálida y limpia.
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.5Hz) y conectamos su salida directo a las entradas de frecuencia de las notas principales del sintetizador.
Así se genera un vibrato en tiempo real, con sabor analógico, que le da más cuerpo armónico al acorde final. Un triunfo retro rico y gratificante que pesa exactamente cero bytes en descargas de archivos.