Grundlegende Konzepte der Web Audio API

Audiographen

Ein Audiograph (oder Audio-Routing-Graph) ist ein Netzwerk verbundener Audio-Nodes innerhalb eines AudioContext. Die Web Audio API verwendet dieses Netzwerk, um Klang zu verarbeiten und zu erzeugen. Jeder Node erfüllt eine bestimmte Aufgabe. Mehrere Nodes werden miteinander verbunden, um einen Signalpfad von einer Quelle zu einem Ziel aufzubauen – in der Regel zu den Lautsprechern. Dieser modulare Aufbau ermöglicht komplexe Audiofunktionen mit dynamischen Effekten.

Mehrere Quellen mit unterschiedlichen Kanalanordnungen werden unterstützt, auch innerhalb eines einzigen Kontexts.

Audio-Nodes werden über ihre Ein- und Ausgänge verbunden. So entsteht eine Kette, die bei einer oder mehreren Quellen beginnt, durch einen oder mehrere Nodes führt und an einem Ziel endet. Wenn Sie Audiodaten lediglich visualisieren möchten, müssen Sie allerdings kein Ziel angeben. Ein einfacher, typischer Ablauf für Web Audio sieht etwa so aus:

1. Erstellen Sie den Audiokontext.
2. Erstellen Sie Audioquellen innerhalb des Kontexts, beispielsweise <audio>, einen Oszillator oder einen Stream.
3. Erstellen Sie Audioeffekte, beispielsweise Reverb-, Biquad-Filter-, Panner- oder Kompressor-Nodes.
4. Wählen Sie das endgültige Ziel für das Audiosignal, beispielsweise die Lautsprecher des Computers.
5. Verbinden Sie die Quell-Nodes mit keinem, einem oder mehreren Effekt-Nodes und anschließend mit dem gewählten Ziel.

Jeder Ein- oder Ausgang besteht aus einem oder mehreren Audio-Kanälen, die zusammen eine bestimmte Kanalanordnung bilden. Beliebige diskrete Kanalstrukturen werden unterstützt, darunter Mono, Stereo, Quad, 5.1 und weitere.

Sie haben mehrere Möglichkeiten, Audiosignale zu beziehen:

• Klang kann direkt in JavaScript von einem Audio-Node erzeugt werden, beispielsweise einem Oszillator.
• Er kann aus rohen PCM-Daten erstellt werden, beispielsweise aus .WAV-Dateien oder anderen von decodeAudioData() unterstützten Formaten.
• Er kann von HTML-Medienelementen wie <video> oder <audio> stammen.
• Er kann aus einem WebRTC-MediaStream stammen, beispielsweise von einer Webcam oder einem Mikrofon.

Audiodaten: Was steckt in einem Sample?

Bei der Verarbeitung eines Audiosignals findet eine Abtastung statt. Abtastung bezeichnet die Umwandlung eines kontinuierlichen Signals in ein diskretes Signal. Anders ausgedrückt: Eine kontinuierliche Schallwelle, etwa die Musik einer live spielenden Band, wird in eine Folge digitaler Samples (ein zeitdiskretes Signal) umgewandelt. Dadurch kann ein Computer das Audiosignal in einzelnen Blöcken verarbeiten.

Weitere Informationen finden Sie auf der Wikipedia-Seite Sampling (signal processing).

Audiopuffer: Frames, Samples und Kanäle

Ein AudioBuffer wird durch drei Parameter definiert:

• die Anzahl der Kanäle (1 für Mono, 2 für Stereo, sechs für 5.1 usw.),
• seine Länge, also die Anzahl der Sample-Frames im Puffer,
• und die Abtastrate, also die Anzahl der pro Sekunde abgespielten Sample-Frames.

Einige wichtige Begriffe:

• Ein Sample ist ein einzelner 32-Bit-Gleitkommawert, der den Wert des Audiosignals zu einem bestimmten Zeitpunkt in einem bestimmten Kanal darstellt (bei Stereo im linken oder rechten Kanal).
• Ein Frame oder Sample-Frame ist die Gesamtheit der Werte aller Kanäle, die zu einem bestimmten Zeitpunkt abgespielt werden (einer bei Mono, zwei bei Stereo usw.).
• Die Abtastrate gibt an, wie viele dieser Samples (oder Frames, da alle Samples eines Frames gleichzeitig abgespielt werden) pro Sekunde abgespielt werden. Sie wird in Hz gemessen. Je höher die Abtastrate, desto besser die Klangqualität.

Betrachten wir je einen Mono- und einen Stereo-Audiopuffer mit einer Dauer von einer Sekunde bei 44100 Hz:

• Der Mono-Puffer enthält 44.100 Samples und 44.100 Frames. Die Eigenschaft length hat den Wert 44.100.
• Der Stereo-Puffer enthält 88.200 Samples, aber weiterhin 44.100 Frames. Die Eigenschaft length hat weiterhin den Wert 44100, da sie der Anzahl der Frames entspricht.

Beim Abspielen eines Puffers hören Sie zuerst den Frame ganz links, dann den unmittelbar daneben, dann den nächsten und so weiter bis zum Ende des Puffers. Bei Stereo hören Sie beide Kanäle gleichzeitig. Sample-Frames sind nützlich, weil sie unabhängig von der Anzahl der Kanäle sind und die Zeit für eine präzise Audiobearbeitung auf ideale Weise abbilden.

Hier sind zwei einfache Beispiele:

const buffer = new AudioBuffer({
  numberOfChannels: 2,
  length: 22050,
  sampleRate: 44100,
});

Mit dem obigen Aufruf erhalten Sie einen Stereo-Puffer mit zwei Kanälen. Wird er über einen AudioContext mit 44100 Hz abgespielt (ein sehr gängiger Wert, den die meisten gewöhnlichen Soundkarten verwenden), dauert die Wiedergabe 0,5 Sekunden: 22.050 Frames / 44.100 Hz = 0,5 Sekunden.

const buffer = new AudioBuffer({
  numberOfChannels: 1,
  length: 22050,
  sampleRate: 22050,
});

Mit diesem Aufruf erhalten Sie einen Mono-Puffer (einen Puffer mit einem Kanal). Wird er über einen AudioContext mit 44.100 Hz abgespielt, wird er automatisch auf 44.100 Hz neu abgetastet (und enthält dadurch 44.100 Frames). Die Wiedergabe dauert 1,0 Sekunden: 44.100 Frames / 44.100 Hz = 1 Sekunde.

Planare und verschachtelte Puffer

Die Web Audio API verwendet ein planares Pufferformat. Der linke und der rechte Kanal werden folgendermaßen gespeichert:

LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)

Diese Struktur ist in der Audioverarbeitung weit verbreitet und erleichtert die unabhängige Verarbeitung jedes Kanals.

Eine Alternative ist ein verschachteltes Pufferformat:

LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)

Dieses Format wird häufig verwendet, um Audiodaten ohne aufwendige Verarbeitung zu speichern und abzuspielen, beispielsweise bei .WAV-Dateien oder einem dekodierten MP3-Stream.

Da die Web Audio API für die Verarbeitung konzipiert ist, stellt sie ausschließlich planare Puffer bereit. Sie verwendet das planare Format, wandelt die Audiodaten aber in das verschachtelte Format um, wenn sie sie zur Wiedergabe an die Soundkarte sendet. Umgekehrt beginnt die API beim Dekodieren einer MP3-Datei mit dem verschachtelten Format und wandelt es zur Verarbeitung in das planare Format um.

Audiokanäle

Audiopuffer können unterschiedlich viele Kanäle enthalten. Die meisten modernen Audiogeräte verwenden die grundlegenden Einstellungen Mono (nur ein Kanal) und Stereo (linker und rechter Kanal). Einige komplexere Systeme unterstützen Surround-Sound-Anordnungen wie Quad und 5.1. Dank der größeren Anzahl an Kanälen können sie ein räumlicheres Klangerlebnis bieten. Für die Kanäle verwenden wir üblicherweise die Standardabkürzungen aus der folgenden Tabelle:

Up-Mixing und Down-Mixing

Wenn die Anzahl der Eingangs- und Ausgangskanäle nicht übereinstimmt, ist Up-Mixing oder Down-Mixing erforderlich. Die folgenden Regeln gelten abhängig davon, ob die Eigenschaft AudioNode.channelInterpretation auf speakers oder discrete gesetzt ist:

Visualisierungen

Für Audiovisualisierungen erfassen wir in der Regel das Ausgangssignal im zeitlichen Verlauf und lesen dabei beispielsweise Pegel- oder Frequenzdaten aus. Anschließend wandeln wir die gewonnenen Daten mit einem Grafikwerkzeug in eine visuelle Darstellung um, etwa ein Diagramm. Die Web Audio API stellt dafür einen AnalyserNode bereit. Er verändert das Audiosignal, das ihn durchläuft, nicht und gibt zusätzlich Audiodaten aus, die wir beispielsweise mit <canvas> verarbeiten können.

Mit den folgenden Methoden können Sie Daten abrufen:

AnalyserNode.getFloatFrequencyData()

Kopiert die aktuellen Frequenzdaten in ein übergebenes Float32Array-Array.

AnalyserNode.getByteFrequencyData()

Kopiert die aktuellen Frequenzdaten in ein übergebenes Uint8Array (ein Array vorzeichenloser Bytes).

AnalyserNode.getFloatTimeDomainData()

Kopiert die aktuellen Wellenform- beziehungsweise Zeitbereichsdaten in ein übergebenes Float32Array-Array.

AnalyserNode.getByteTimeDomainData()

Kopiert die aktuellen Wellenform- beziehungsweise Zeitbereichsdaten in ein übergebenes Uint8Array (ein Array vorzeichenloser Bytes).

Räumliche Audiowiedergabe

Mit räumlicher Audiowiedergabe können wir die Position und das Verhalten eines Audiosignals an einem bestimmten Punkt im Raum modellieren und simulieren, wie eine hörende Person dieses Signal wahrnimmt. In der Web Audio API übernehmen PannerNode und AudioListener die räumliche Audiowiedergabe.

Der Panner verwendet ein rechtshändiges kartesisches Koordinatensystem. Er beschreibt die Position der Audioquelle als Vektor und ihre Ausrichtung als dreidimensionalen Richtungskegel. Dieser Kegel kann beispielsweise bei omnidirektionalen Quellen sehr groß sein.

Auch die hörende Person wird in der Web Audio API mithilfe eines rechtshändigen kartesischen Koordinatensystems beschrieben: ihre Position durch einen Vektor und ihre Ausrichtung durch zwei Richtungsvektoren, up und front. Diese Vektoren geben an, in welche Richtung der Scheitel beziehungsweise die Nase der Person zeigt. Sie stehen senkrecht zueinander.

Fan-in und Fan-out

In der Audiotechnik bezeichnet Fan-in einen Vorgang, bei dem ein ChannelMergerNode mehrere Mono-Eingangsquellen zu einem einzigen Mehrkanalsignal zusammenführt:

Fan-out bezeichnet den umgekehrten Vorgang: Ein ChannelSplitterNode nimmt eine Mehrkanal-Eingangsquelle entgegen und gibt mehrere Mono-Ausgangssignale aus: