Ratgeber · Web-Audio & Technik
Web Audio API: Wie Browser Audio in Echtzeit analysieren
Die Web Audio API ist seit 2011 als W3C-Standard im Aufbau und in allen modernen Browsern verfügbar. Sie erlaubt Audio-Analyse in Echtzeit mit Sub-Frame-Latenz und liefert sowohl Wellenform- als auch Frequenzspektrum-Daten. Dieser Ratgeber zeigt, wie AudioContext, AnalyserNode und FFT-Berechnung zusammenarbeiten, welche Parameter Visualisierungs-Verhalten steuern und wo die Grenzen der API liegen.
Die Architektur der Web Audio API
Die Web Audio API arbeitet als modulare Knotenpunkte-Pipeline. Jeder Knoten hat Eingänge und Ausgänge, Knoten werden mit .connect() verbunden. Die Pipeline läuft in einem separaten Audio-Worker-Thread, getrennt vom JavaScript-Hauptthread, was die Latenz extrem niedrig hält (typisch unter 20 ms auf Desktop, unter 50 ms auf Mobile).
Eine minimale Visualizer-Pipeline besteht aus drei Knoten:
[HTMLMediaElement] → MediaElementAudioSourceNode → AnalyserNode → AudioContext.destinationDas Audio-Element liefert den Stream, der MediaElementAudioSourceNode konvertiert ihn in einen Web-Audio-kompatiblen Stream, der AnalyserNode extrahiert die Visualisierungs-Daten, und die Destination spielt den Stream auf der Audio-Hardware ab. Wichtig: der AnalyserNode beeinflusst das Audio-Signal nicht, er liefert nur passive Analyse-Daten.
Was der AnalyserNode liefert
Der AnalyserNode hat vier wichtige Parameter und zwei Methoden zur Datenerhebung.
Parameter:
fftSize: Anzahl der Samples, über die FFT berechnet wird. Werte: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, 32768. Höhere Werte: feinere Frequenz-Auflösung, mehr CPU.frequencyBinCount: Read-only, immer fftSize/2. Anzahl der Frequenz-Bins im Spektrum.minDecibels/maxDecibels: Der dynamische Bereich des Frequenz-Spektrums in dB. Defaults: -100 / -30 dB. Werte außerhalb werden auf 0 oder 255 geclippt.smoothingTimeConstant: Smoothing zwischen Frames (0 bis 1). Default 0.8. Höhere Werte = weichere Übergänge, langsamere Reaktion.
Methoden:
getByteTimeDomainData(Uint8Array): Füllt das Array mit den letzten fftSize Audio-Samples als Wellenform (0-255, 128 ist Stille).getByteFrequencyData(Uint8Array): Füllt das Array mit dem aktuellen Frequenz-Spektrum (0-255, 0 ist leise/nicht-vorhanden, 255 ist laut).
In jedem requestAnimationFrame wird eine dieser Methoden aufgerufen, das resultierende Array wird zur Visualisierung verwendet.
FFT-Größe als Performance vs Auflösung Trade-off
Die Wahl der fftSize ist ein Trade-off. Niedrige Werte (256, 512) liefern grobe Frequenz-Auflösung (172 Hz, 86 Hz pro Bin), aber schnelle Reaktion auf Audio-Änderungen und niedrige CPU-Last. Hohe Werte (4096, 8192) liefern feine Auflösung (10.8 Hz, 5.4 Hz pro Bin) für detaillierte Spektrum-Analyse, kosten aber mehr CPU.
Für Bass-betonte Musik (Hip-Hop, EDM) reicht fftSize=1024 oder 2048, weil Bass-Frequenzen ohnehin breite Bänder sind und die feinere Auflösung in höheren Frequenzen visuell wenig bringt. Für Klassik oder Orchester kann fftSize=4096 Sinn machen, weil dort einzelne Instrumente in benachbarten Frequenzbereichen liegen und sauberer getrennt visualisiert werden sollen.
Der Default 2048 ist für die meisten Anwendungen ein guter Kompromiss.
smoothingTimeConstant für visuelle Wirkung
Der smoothingTimeConstant zwischen 0 und 1 bestimmt, wie stark der aktuelle Frame mit dem vorherigen geglättet wird. Mathematisch: output[i] = smoothing * previous[i] + (1 - smoothing) * current[i].
0.0bis0.3: scharf reagiert, jeder Beat ist sofort sichtbar, aber Wellenform wirkt unruhig0.4bis0.6: ausgewogen, gut für Particles und Bars0.7bis0.85: weich, gut für Spektrum-Visualisierungen und gefüllte Flächen0.9bis0.99: sehr träge, fast wie ein Verlauf, kaum schnelle Bewegungen
Der Default 0.8 passt für die meisten Anwendungen. Wer Equalizer-Bars baut, die mit jedem Bass-Schlag scharf reagieren sollen, geht auf 0.5-0.7. Wer weiche, ambient-artige Visualisierungen baut, geht auf 0.85-0.95.
minDecibels und maxDecibels für Dynamikbereich
Audio-Signale haben einen großen Dynamikbereich, von sehr leise (-100 dB unter Vollaussteuerung) bis Maximum (0 dB). Der AnalyserNode normalisiert diesen Bereich auf 0-255 für die Visualisierung.
Default ist minDecibels = -100 und maxDecibels = -30. Das heißt: alles unter -100 dB wird auf 0 abgebildet, alles über -30 dB auf 255. Für die meisten gemasterten Tracks (Pop, Rock, Electronic) liegt die durchschnittliche Lautheit zwischen -20 und -10 dB, deshalb visualisieren die Defaults für diese Musik gut.
Für Musik mit großem Dynamic Range (Klassik, Jazz, Ambient) kann die Visualisierung wirken, als wäre die Hälfte der Zeit zu leise. Lösung: minDecibels = -120 (sensibler für leise Passagen), maxDecibels = -10. Für sehr laut gemasterten Music (Loudness War, gepresste EDM-Master): minDecibels = -70, maxDecibels = -15, was die mittlere Lautheit besser ausnutzt.
Grenzen der Web Audio API
Die Web Audio API ist stabil und mächtig, hat aber drei Grenzen, die Entwickler kennen sollten.
Erstens: kein Zugriff auf System-Audio. Die API kann nur Audio analysieren, das du als Datei oder als Mikrofon-Stream bereitstellst. Streaming-Dienste mit DRM (Spotify, Apple Music) sperren ihre Audio-Streams gegen externen Zugriff. Wer System-Audio analysieren will, braucht Desktop-Software mit System-Audio-Loopback (Resolume, SunVox, Magic).
Zweitens: Latenz auf Mobile. Auf Desktop liegt die API-Latenz typisch unter 20 ms (kaum wahrnehmbar). Auf Mobile, vor allem auf älteren iOS-Geräten oder budget Android-Phones, kann die Latenz auf 80-150 ms steigen. Das ist für reine Visualisierung unproblematisch, aber für Live-Performance-Tools mit Mikrofon-Eingabe spürbar.
Drittens: kein Multi-Channel-Routing. Die API arbeitet typisch in Stereo (zwei Kanäle), kann aber bis zu 32 Kanäle handhaben. Für reine Visualisierung reicht Stereo, für Profi-DJ-Tools mit separaten Bus-Outputs (z.B. Bass-Bus, Mid-Bus, Highs-Bus zur Lautsprecher-Trennung) stößt die API an Grenzen.
Was die API für Visualisierung leistet
Die Web Audio API liefert seit 2011 alles, was ein moderner Browser-Visualizer braucht: Echtzeit-Audio-Pipeline, FFT-Spektrum, Wellenform-Daten, niedrige Latenz, geringe CPU-Last. Wer eine Visualisierungs-App baut, hat mit AudioContext, MediaElementAudioSourceNode und AnalyserNode die drei Knoten, die 95 Prozent der Anwendungen abdecken. Die restlichen 5 Prozent (Effects, Filter, Worklet-basierte Custom-Processoren) sind in der API ebenfalls vorhanden, kommen aber nur in komplexeren Anwendungen vor.
FAQ
Häufige Fragen
Was ist die Web Audio API genau?
Eine JavaScript-API, die seit 2011 vom W3C entwickelt wird und Audio-Verarbeitung im Browser ermöglicht. Anders als das ältere HTMLMediaElement (das Audio nur abspielt) bietet die Web Audio API eine modulare Audio-Pipeline mit Knotenpunkten (Source, Filter, Analyser, Destination), die in Echtzeit Audio-Daten generieren, verarbeiten und analysieren können. Ihr Hauptanwendungsfall ist nicht Playback, sondern interaktive Audio-Anwendungen: Spiele, Sequencer, Synthesizer, Visualizer.
Was macht ein AudioContext?
Der AudioContext ist die zentrale Klasse der Web Audio API, vergleichbar mit dem WebGL-Context für 3D-Grafik. Er erzeugt alle Audio-Knoten (Sources, Filter, Analyser, Effects), verwaltet die Audio-Pipeline und stellt eine Verbindung zur Audio-Hardware her. Jeder Browser-Tab hat normalerweise einen AudioContext. Die Sample-Rate (typisch 44.100 oder 48.000 Hz) wird beim Erstellen des Kontextes festgelegt und kann nicht nachträglich geändert werden.
Was ist ein AnalyserNode?
Ein Audio-Knoten, der nicht das Audio-Signal verändert, sondern Analyse-Daten extrahiert. Er liefert in jedem Animation-Frame zwei Datenfelder: getByteTimeDomainData() für die Wellenform (Zeit-Domäne, Werte 0-255), getByteFrequencyData() für das Frequenzspektrum (Frequenz-Domäne, Werte 0-255 für FFT-Magnitude in dB). Das Frequenzspektrum entsteht durch eine schnelle Fourier-Transformation (FFT) über die letzten N Samples, wobei N=fftSize konfigurierbar ist (256, 512, 1024, 2048, 4096, 8192).
Was passiert bei einer FFT?
Die Fast Fourier Transformation zerlegt ein zeitbasiertes Audio-Signal in seine Frequenzbestandteile. Mathematisch: gegeben N Audio-Samples in der Zeit-Domäne, berechnet FFT N/2 Frequenz-Bins, jeder Bin enthält Magnitude und Phase einer Sinus-Komponente. Beispiel: bei fftSize=2048 und Sample-Rate 44.100 Hz hast du 1024 Frequenz-Bins, die den Bereich von 0 bis 22.050 Hz abdecken, jeder Bin etwa 21.5 Hz breit. Die FFT läuft in jedem Browser-Frame, also typisch 60 Mal pro Sekunde, mit moderner CPU kein Performance-Problem.
Welche Browser unterstützen Web Audio API komplett?
Stand 2026 alle modernen: Chrome ab Version 14 (2011), Firefox ab Version 25 (2013), Safari ab Version 6 (auf macOS, iOS Safari ab Version 14.5), Edge ab Version 12 (basierend auf Chromium dann ab Edge 79). Praktisch funktioniert die API in allen Browsern, die in den letzten drei Jahren ein größeres Update bekommen haben. Einzelne neuere Features (z.B. AudioWorklet ab 2018) sind in älteren Mobile-Browsern noch nicht überall verfügbar.
Quellen