Bij het bouwen van de geluidsfeedback voor Lingo Ladders stonden we voor een grote keuze: zware geluidsbestanden (MP3/WAV) via het netwerk downloaden, of geluid live opwekken met code?
Voor een ervaring die 100% royaltyvrij, privé en zonder vertraging is, bouwden we een eigen geluidssynthesizer op de ingebouwde HTML5 Web Audio API. Dit artikel laat zien hoe de retro spelgeluiden van Lingo Ladders werken.
"Goede progressive-web-techniek gebruikt de rekenkracht van het apparaat zelf, in plaats van de bandbreedte te verstoppen met mediadownloads."
1. Het gewicht van geluidsbestanden
Gewone webapps halen geluidsbestanden op via HTTP. Dat brengt een paar flinke technische nadelen mee:
- Bandbreedte: zelfs simpele geluidseffecten voegen megabytes toe aan de eerste laadtijd van een PWA.
- Vertraging: ophalen of bufferen van audio zorgt voor een merkbare pauze tussen de klik van een speler en het geluid. Dat verpest het tastbare gevoel.
- Auteursrecht: wie vooraf opgenomen geluiden host, loopt risico op licentieproblemen.
2. Golfvormen opwekken met code
In plaats van bestanden gebruikt Lingo Ladders de processor om ruwe golfvormen te synthetiseren in LingoAudioManager (libraries/audio-manager.js).
- We maken lokale OscillatorNodes en GainNodes aan om de golven live te sturen.
- Het succesgeluid is bijvoorbeeld een snelle arpeggio in C-groot van vier zuivere sinustonen:
- C5 (523,25 Hz) → E5 (659,25 Hz) → G5 (783,99 Hz) → C6 (1046,50 Hz).
- Elke toon krijgt een nauwkeurige exponentiële volumecurve tegen harde klikjes. Het resultaat is een warm, helder retro belletje.
3. Vibrato met FM-modulatie
Voor de grote overwinningsfanfare gingen we een stap verder. We maakten een aparte laagfrequente modulator-oscillator (op 5,5 Hz) en stuurden de uitvoer daarvan rechtstreeks naar de frequentie-ingangen van de hoofdnoten.
Dat geeft live, analoog klinkend vibrato dat het slotakkoord voller maakt. Een rijke retro overwinning die precies nul bytes aan downloads kost!