Kurz erklärt · Technik & Plattform
Web Audio ist eine Programmierschnittstelle im Webbrowser (Web Audio API), mit der Webseiten Klänge erzeugen, abspielen und bearbeiten – aus Bausteinen wie Tongenerator, Filter und Lautstärke, die zu einer Signalkette verbunden werden.
Auch: Web Audio API, WebAudio, AudioContext, Web-Audio-Schnittstelle
Was ist Web Audio?
Die Web Audio API ist ein Web-Standard des W3C, des Gremiums für Web-Standards, und seit 2021 eine offizielle Empfehlung. Sie gibt Webseiten ein kleines Tonstudio an die Hand: Klänge laden oder selbst erzeugen, mischen, filtern, im Raum verteilen und auf die Millisekunde genau starten.
Für Spiele ist das wichtig, weil jede Aktion sofort hörbar sein muss – ein Sprung, ein Treffer, ein Münzklang. Mehrere Geräusche laufen gleichzeitig, ohne sich gegenseitig abzuschneiden. Manche Spiele erzeugen sogar ihre ganze Musik live im Browser, ähnlich wie die Soundchips der 8-Bit-Zeit.
Wie funktioniert Web Audio?
Herzstück ist der AudioContext, eine Art Mischpult. Darin verbindet ein Spiel Bausteine, sogenannte Nodes, zu einer Signalkette:
| Baustein | Aufgabe | Beispiel im Spiel |
|---|---|---|
| Oszillator | Erzeugt einen Ton in einer Grundform: Sinus, Rechteck, Dreieck oder Sägezahn | Piepsen, Laser, Bass einer Chiptune-Melodie |
| Audiopuffer | Spielt eine geladene Aufnahme ab | Stimme, Explosion, Applaus |
| Filter | Nimmt Höhen oder Tiefen weg und formt den Klang | Dumpfer Klang unter Wasser |
| Lautstärke (Gain) | Macht leiser oder lauter, blendet ein und aus | Musik leiser, wenn das Menü offen ist |
| Panner | Verteilt den Klang nach links, rechts oder in den Raum | Gegner kommt von rechts |
| Ausgabe | Schickt das Ergebnis an Lautsprecher oder Kopfhörer | Alles, was du hörst |
Web Audio hat eine eigene, sehr genaue Uhr. Ein Spiel kann Töne deshalb exakt im Takt einplanen, statt sie nur „ungefähr jetzt“ abzuspielen. Das ist die Grundlage für Rhythmus-Mechaniken und für Chiptune-Musik, die Note für Note im Code entsteht.
Warum hat ein Browserspiel manchmal keinen Ton?
Browser spielen Ton erst ab, wenn du mit der Seite etwas gemacht hast – getippt, geklickt oder eine Taste gedrückt. Diese Regel schützt vor Webseiten, die ungefragt losdröhnen. Viele Spiele starten deshalb mit einem Knopf wie „Los“ oder „Ton an“.
- Einmal ins Spiel tippen oder klicken.
- Lautstärke des Geräts und einen Stummschalter prüfen.
- Ton- und Musikregler in den Optionen des Spiels prüfen.
- Ist das Handy lautlos gestellt, bleiben manche Browser auch im Spiel stumm.
Web Audio oder Audio-Element: der Unterschied
Für einfache Fälle gibt es in HTML das <audio>-Element: Datei abspielen, anhalten, fertig. Das reicht für Hintergrundmusik oder einen Podcast. Für Spiele ist es zu grob, denn es startet nicht millisekundengenau und kann Klänge kaum verändern.
Web Audio erzeugt Töne dagegen auch ohne Datei, mischt viele Quellen und reagiert sofort. Das spart Ladezeit: Ein Spiel, das seine Musik im Code erzeugt, muss keine großen Musikdateien herunterladen. Das Gegenstück für die Grafik ist das HTML5-Canvas.
Web Audio in Spielen auf Player 0o5
Keks-Imperium
Auch bei Keks-Imperium entstehen Grafik und Musik im Spiel selbst; in den Optionen stellst du Musik und Lautstärke ein.
Häufige Fragen zu Web Audio
Was ist die Web Audio API?
Die Web Audio API ist eine Schnittstelle im Browser, mit der Webseiten Klänge erzeugen und bearbeiten. Sie verbindet Bausteine wie Tongenerator, Filter und Lautstärkeregler zu einer Signalkette.
Warum startet der Ton erst nach dem ersten Tippen?
Browser erlauben Ton erst nach einer Aktion von dir, etwa einem Tippen oder Klick. So spielt keine Seite ungefragt Geräusche ab.
Braucht Web Audio Sounddateien?
Nicht unbedingt. Ein Oszillator erzeugt Töne direkt im Code. Viele Spiele mischen beides: erzeugte Effekte und geladene Aufnahmen.
Funktioniert Web Audio auf dem Handy?
Ja, aktuelle Browser auf Handy, Tablet und PC unterstützen Web Audio. Ist das Gerät lautlos gestellt, bleibt der Ton je nach Browser trotzdem aus.
Verwandte Begriffe
- Grafik & SoundChiptuneRechteck, Dreieck, Rauschen: Wie Chiptunes aus wenigen Klangwellen ganze Songs bauen – und welche Spiele auf 0o5.de ihre Musik live erzeugen.
- Retro & DDR-Heimcomputer8-BitWas bedeutet 8-Bit? Bits und Bytes einfach erklärt, warum 255 die größte Zahl ist und was 8-Bit-Grafik und -Sound mit alten Prozessoren zu tun haben.
- Technik & PlattformHTML5-CanvasDie Leinwand im Browser: Auf dem Canvas malen Spiele ihr Bild Pixel für Pixel – meist 60-mal pro Sekunde neu.
- Genres & SpielartenBrowserspielAdresse öffnen und losspielen: Was ein Browserspiel ist, welche Webtechnik dahintersteckt und was es von Apps und Progressive Web Apps unterscheidet.
- Technik & PlattformWebGLWie kommt 3D in den Browser? WebGL lässt die Grafikkarte rechnen – aus Eckpunkten werden Dreiecke, aus Dreiecken Pixel.