När vi byggde ljudåterkopplingen i Lingo Ladders stod vi inför ett stort val: skulle vi ladda ner tunga ljudfiler (MP3/WAV) över nätet, eller skapa ljuden med kod i realtid?
För att få en upplevelse som är helt royaltyfri, privat och utan fördröjning byggde vi en motor för ljudsyntes med webbläsarens inbyggda HTML5 Web Audio API. Den här artikeln visar hur retroljuden i Lingo Ladders är byggda.
”Riktig progressiv webbutveckling använder lokala processorer i stället för att täppa till bandbredden med nedladdade mediefiler.”
1. Ljudfilernas tyngd
Vanliga webbappar hämtar ljudfiler över HTTP. Det ger flera stora tekniska problem:
- Bandbredd: Även enkla ljudeffekter lägger till megabyte till PWA:ns första sidladdning.
- Latens och fördröjning: Att hämta eller buffra ljud ger en märkbar fördröjning mellan att spelaren klickar på en knapp och hör tonen, och då försvinner känslan av direkt respons.
- Upphovsrättsrisker: Att lagra förinspelade klipp kan ge utvecklare juridiska licensproblem.
2. Vågformer skapade med kod
I stället för filer låter Lingo Ladders processorn syntetisera råa vågformer i LingoAudioManager (libraries/audio-manager.js).
- Vi skapar lokala OscillatorNodes och GainNodes som styr vågorna dynamiskt.
- Ljudet för rätt svar byggs till exempel genom att schemalägga ett snabbt arpeggio i C-dur med fyra rena sinustoner:
- C5 (523,25 Hz) → E5 (659,25 Hz) → G5 (783,99 Hz) → C6 (1046,50 Hz).
- Varje frekvens har en exakt exponentiell volymkurva som förhindrar hårda klickljud. Resultatet blir en varm, ren och organisk retroklang.
3. FM-modulerat vibrato
Till den stora segerfanfaren gick vi ett steg längre. Vi skapade en separat lågfrekvent modulatoroscillator (på 5,5 Hz) och kopplade dess utsignal direkt till frekvensingångarna på våra huvudtoner.
Det ger ett analogt vibrato i realtid som gör slutackordet fylligare: en belönande retrotriumf som kostar exakt noll byte i nedladdade filer!