Quando abbiamo progettato i suoni di Lingo Ladders, abbiamo dovuto scegliere: scaricare file audio pesanti (MP3/WAV) dalla rete o generare i suoni via codice, in tempo reale?
Per avere suoni liberi da diritti al 100%, rispettosi della privacy e senza latenza, abbiamo costruito un motore di sintesi audio con la Web Audio API nativa di HTML5. Questo articolo racconta come nascono i suoni retrò di Lingo Ladders.
“Una buona app web usa l’elaborazione locale invece di intasare la banda con il download di file multimediali.”
1. Il peso dei file audio
Le app web di solito scaricano i file audio via HTTP. Questo crea diversi problemi:
- Consumo di banda: anche effetti sonori semplici aggiungono megabyte al primo caricamento di una PWA.
- Latenza e ritardi: scaricare o bufferizzare l’audio crea un ritardo percepibile tra il tocco del giocatore e il suono, e si perde la sensazione di risposta immediata.
- Rischi di copyright: ospitare clip preregistrate espone gli sviluppatori a problemi di licenza.
2. Forme d’onda generate dal codice
Invece dei file, Lingo Ladders usa la CPU per sintetizzare forme d’onda dentro LingoAudioManager (libraries/audio-manager.js).
- Creiamo OscillatorNode e GainNode locali per controllare le onde in modo dinamico.
- Per esempio, il suono di successo è un rapido arpeggio in Do maggiore di quattro toni sinusoidali puri:
- C5 (523,25 Hz) → E5 (659,25 Hz) → G5 (783,99 Hz) → C6 (1046,50 Hz).
- Ogni frequenza ha una curva di guadagno esponenziale precisa che evita i clic secchi, e il risultato è un rintocco retrò caldo e pulito.
3. Vibrato con modulazione di frequenza
Per la fanfara di vittoria siamo andati oltre. Abbiamo creato un oscillatore modulatore indipendente a bassa frequenza (5,5 Hz) e ne abbiamo collegato l’uscita direttamente agli ingressi di frequenza delle note principali.
Così si ottiene in tempo reale un vibrato simile a quello analogico, che arricchisce l’accordo finale e rende la vittoria più piena e appagante. Il tutto pesa esattamente zero byte di file da scaricare.