🌐 Web Audio API

Audio-Verarbeitung direkt im Browser

Was ist die Web Audio API?

Die Web Audio API ist eine Schnittstelle (API), die es Web-Browsern ermöglicht, Audio direkt im Browser zu verarbeiten und zu erzeugen – Sie ermöglicht es Entwicklern, komplexe Audio-Anwendungen zu erstellen, ohne Plugins oder externe Programme zu benötigen.

💡 Was ist eine API? API steht für Application Programming Interface. Es ist eine Sammlung von Regeln und Funktionen, die es Programmen ermöglicht, miteinander zu kommunizieren. Die Web Audio API sagt dem Browser: "So kannst du Audio verarbeiten".

Mit der Web Audio API kannst du:

Audio-Dateien abspielen und steuern
Neue Töne erzeugen (z.B. Sinustöne)
Audio-Effekte anwenden (z.B. Verzerrung, Verzögerung)
Audio in Echtzeit analysieren
Interaktive Audio-Anwendungen erstellen

Struktur des Web Audio API Graphen mit verschiedenen Audio-Nodes: Quellen, Effekte und Ausgabe

💡 W3Schools Ressource: Für Informationen über die Web Audio API und deren Anwendung siehe Web Audio API auf W3Schools

AudioContext

Der AudioContext ist das "Herzstück" der Web Audio API. Er ist wie eine "Audiowerkstatt", in der alle Audio-Operationen stattfinden. Du musst immer zuerst einen AudioContext erstellen, bevor du mit Audio arbeiten kannst.

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

💡 Merke: Der AudioContext ist wie eine virtuelle Audiowerkstatt – alles Audio wird darin bearbeitet.

AudioNodes

AudioNodes sind wie "Bausteine" für Audio. Jeder Baustein hat eine spezielle Funktion:

Quellen: Erzeugen von Audio (z.B. Töne abspielen, Mikrofon aufnehmen)
Effekte: Verändern von Audio (z.B. Lautstärke, Filter, Verzögerung)
Ausgänge: Senden Audio zu den Lautsprechern

AudioGraph

Der AudioGraph beschreibt, wie die AudioNodes miteinander verbunden sind – wie ein Fließband in einer Fabrik. Audio fließt von Quellen über Effekte zu den Ausgängen.

💡 Vergleich: Stell dir den AudioGraph wie ein Fließband vor – Audio geht durch verschiedene Stationen (Effekte), bevor es am Ende ausgegeben wird.

Einfaches Beispiel

Hier ist ein einfaches Beispiel, das einen Ton erzeugt und abspielt:

// Schritt 1: Erstelle eine Audio-Werkstatt (AudioContext)
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// Schritt 2: Erstelle einen Ton-Generator (Oszillator)
const oscillator = audioCtx.createOscillator();
oscillator.type = 'sine';  // Erzeugt eine Sinuswelle (reiner Ton)
oscillator.frequency.value = 440; // Setzt die Frequenz auf 440 Hz (A4-Note)

// Schritt 3: Verbinde den Ton-Generator mit den Lautsprechern
oscillator.connect(audioCtx.destination);

// Schritt 4: Starte den Ton
oscillator.start();

// Schritt 5: Stoppe den Ton nach 2 Sekunden
setTimeout(() => {
  oscillator.stop();
}, 2000); // 2000 Millisekunden = 2 Sekunden

💡 Erklärung: Dieses Beispiel erstellt einen reinen Ton (440 Hz = A4-Note) und spielt ihn für 2 Sekunden ab. Der Ton ist eine Sinuswelle – die einfachste Form eines Tones.

Audio-Quellen

OscillatorNode (Ton-Generator)

Der OscillatorNode ist wie ein "elektronischer Synthesizer" – er erzeugt kontinuierliche Töne:

sine: Reiner Ton (wie eine Stimmgabel)
square: Klarer, kantiger Klang (wie bei alten Computerspielen)
sawtooth: Sägezahnform – reichhaltiger Klang
triangle: Dreieckform – ähnlich Sinus, aber mit mehr Obertönen

💡 Vergleich: Ein Oszillator ist wie ein elektronisches Instrument, das verschiedene Klangformen erzeugen kann.

AudioBufferSourceNode (Audio-Datei-Player)

Der AudioBufferSourceNode ist wie ein "Audio-Datei-Player" – er spielt vorab geladene Audiodateien ab. Perfekt für kurze Sounds oder Samples.

💡 Merke: Dieser Node ist ideal für kurze Audiodateien (z.B. Soundeffekte), aber nicht für lange Musikstücke wegen des Ladens in den Speicher.

MediaElementAudioSourceNode (HTML-Audio-Quelle)

Dieser Node ermöglicht die Verarbeitung von Audio aus <audio> oder <video> HTML-Elementen. So kannst du Effekte auf bereits auf der Webseite eingebettete Audiodateien anwenden.

💡 Vergleich: Dieser Node verbindet herkömmliche HTML-Audio-Elemente mit der Web Audio API für Bearbeitung.

Audio-Effekte

GainNode (Lautstärke-Regler)

Die GainNode ist wie ein "Lautstärkeregler" – sie steuert die Lautstärke eines Audiosignals.

const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5; // 50% Lautstärke

💡 Vergleich: Die GainNode ist wie der Lautstärkeregler an deinem Radio oder Computer.

BiquadFilterNode (Frequenz-Filter)

Der BiquadFilterNode ist wie ein "Frequenzfilter" – er lässt bestimmte Frequenzen durch oder blockiert sie:

Lowpass: Lässt tiefe Frequenzen durch, filtert hohe Frequenzen
Highpass: Lässt hohe Frequenzen durch, filtert tiefe Frequenzen
Bandpass: Lässt nur einen bestimmten Frequenzbereich durch

const filter = audioCtx.createBiquadFilter();
filter.type = 'lowpass';
filter.frequency.value = 1000; // 1kHz Grenzfrequenz

💡 Beispiel: Ein Lowpass-Filter ist wie eine Tonregelung, die nur die Bässe durchlässt und die Höhen herausfiltert.

DelayNode (Verzögerung)

Die DelayNode fügt eine zeitliche Verzögerung hinzu – ideal für Echo-Effekte. Du kannst bestimmen, wie lange die Verzögerung ist und wie laut der "Echo" sein soll.

💡 Vergleich: Ein Delay ist wie ein Echo in den Bergen – der Ton kommt nach einer Verzögerung noch einmal zurück.

ConvolverNode (Hall-Effekt)

Die ConvolverNode erzeugt Hall- oder Raumeffekte. Sie simuliert, wie ein Ton in einem bestimmten Raum (z.B. Kirche, Keller, Saal) klingt.

💡 Beispiel: Mit diesem Effekt kannst du simulieren, dass ein Ton in einer großen Kirche aufgenommen wurde statt in einem kleinen Zimmer.

Praktische Anwendung

Erstellen eines einfachen Synthesizers

Erstelle einen AudioContext
Erstelle einen Oszillator für die Grundfrequenz
Füge einen GainNode für Lautstärkekontrolle hinzu
Verbinde alles mit dem destination
Starte den Oszillator

Audio-Visualisierung

Mit der AnalyserNode können Frequenz- und Zeitdaten extrahiert werden, um Audio zu visualisieren.

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
analyser.connect(destination);

// Abfrage der Frequenzdaten
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);

Browser-Unterstützung

Die Web Audio API wird von allen modernen Browsern unterstützt:

Chrome/Chromium: Vollständige Unterstützung
Firefox: Vollständige Unterstützung
Safari: Gute Unterstützung (einige Einschränkungen)
Edge: Vollständige Unterstützung

⚠️ Hinweis: Einige ältere Browser benötigen Vendor-Prefixe (webkitAudioContext). Der Code-Beispiel oben berücksichtigt dies.

Best Practices

Erstelle den AudioContext erst nach Benutzerinteraktion
Verwende resume() falls der Context suspended ist
Vermeide Memory Leaks durch korrektes Disconnecten von Nodes
Teste auf verschiedenen Geräten wegen unterschiedlicher Latenz
Implementiere Fallbacks für ältere Browser