Als wir die Klangrückmeldung für Lingo Ladders gebaut haben, standen wir vor einer Grundsatzfrage: Laden wir schwere Audiodateien (MP3/WAV) über das Netz, oder erzeugen wir die Töne per Code in Echtzeit?
Damit die Töne lizenzfrei, privat und ohne Verzögerung sind, haben wir eine eigene Klangsynthese mit der nativen HTML5 Web Audio API gebaut. Dieser Artikel zeigt, wie die Retro-Töne von Lingo Ladders entstehen.
„Gute Web-Technik nutzt die Rechenleistung vor Ort, statt die Bandbreite mit Mediendownloads zu verstopfen.“
1. Das Gewicht von Audiodateien
Normale Web-Apps laden ihre Audiodateien per HTTP. Das bringt einige Nachteile:
- Bandbreite: Schon einfache Soundeffekte machen den ersten Seitenaufruf einer PWA um Megabytes größer.
- Latenz: Das Laden oder Puffern von Audio erzeugt eine spürbare Verzögerung zwischen dem Tippen auf einen Knopf und dem Ton. Das Spielgefühl leidet.
- Urheberrecht: Wer fertig aufgenommene Clips hostet, riskiert Lizenzprobleme.
2. Wellenformen per Code
Statt Dateien zu laden, erzeugt Lingo Ladders rohe Wellenformen mit der CPU, im LingoAudioManager (libraries/audio-manager.js).
- Wir legen lokale OscillatorNodes und GainNodes an, um die Wellen dynamisch zu steuern.
- Der Erfolgston zum Beispiel ist ein schnelles C-Dur-Arpeggio aus vier reinen Sinustönen:
- C5 (523,25 Hz) → E5 (659,25 Hz) → G5 (783,99 Hz) → C6 (1046,50 Hz).
- Jede Frequenz bekommt einen genauen exponentiellen Lautstärkeverlauf, damit kein hartes Klicken entsteht. Das Ergebnis ist ein warmer, sauberer Retro-Klang.
3. Vibrato per FM-Modulation
Für die große Siegesfanfare sind wir einen Schritt weiter gegangen. Ein eigener niederfrequenter Modulator-Oszillator (mit 5,5 Hz) speist seine Ausgabe direkt in die Frequenzeingänge der Hauptnoten.
So entsteht in Echtzeit ein analog klingendes Vibrato, das den Schlussakkord voller macht. Ein reicher Retro-Triumph, der beim Download genau null Bytes kostet.