Grundlegende Konzepte hinter der Web Audio API

Audiographen

Die Web Audio API verarbeitet Audiooperationen innerhalb eines Audiokontexts und wurde entwickelt, um modulares Routing zu ermöglichen. Jeder Audioknoten führt eine grundlegende Audiooperation aus und wird mit einem oder mehreren weiteren Audioknoten verknüpft, um einen Audio-Routing-Graphen zu bilden. Mehrere Quellen mit unterschiedlichen Kanallayouts werden unterstützt, sogar innerhalb eines einzelnen Kontexts. Dieses modulare Design bietet die Flexibilität, komplexe Audiofunktionen mit dynamischen Effekten zu erstellen.

Audioknoten werden über ihre Ein- und Ausgänge verknüpft und bilden eine Kette, die mit einer oder mehreren Quellen beginnt, durch einen oder mehrere Knoten führt und schließlich an einem Ziel endet (Sie müssen jedoch kein Ziel angeben, wenn Sie nur Audiodaten visualisieren möchten). Ein einfacher, typischer Workflow für Web Audio könnte etwa so aussehen:

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 Kompressorknoten.
4. Wählen Sie das endgültige Ziel für die Audiodaten, beispielsweise die Lautsprecher des Computers des Benutzers.
5. Verbinden Sie die Quellknoten mit null oder mehr Effektknoten und anschließend mit dem ausgewählten Ziel.

Jeder Ein- oder Ausgang besteht aus einem oder mehreren Audio-Kanälen, die zusammen ein bestimmtes Audiolayout darstellen. Jede diskrete Kanalstruktur wird unterstützt, einschließlich Mono, Stereo, Quad, 5.1 und so weiter.

Es gibt mehrere Möglichkeiten, Audio zu erhalten:

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

Audiodaten: Was enthält ein Sample?

Bei der Verarbeitung eines Audiosignals findet eine Abtastung statt. Abtastung ist die Umwandlung eines kontinuierlichen Signals in ein diskretes Signal. Anders ausgedrückt: Eine kontinuierliche Schallwelle, etwa von einer live spielenden Band, wird in eine Folge digitaler Samples umgewandelt – ein zeitdiskretes Signal –, sodass ein Computer die Audiodaten in einzelnen Blöcken verarbeiten kann.

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 usw.),
• seine Länge, also die Anzahl der Sample-Frames im Puffer,
• und die Abtastrate, also die Anzahl der pro Sekunde wiedergegebenen Sample-Frames.

Ein Sample ist ein einzelner 32-Bit-Gleitkommawert, der den Wert des Audiostreams zu einem bestimmten Zeitpunkt innerhalb eines bestimmten Kanals darstellt, etwa links oder rechts bei Stereo. Ein Frame beziehungsweise Sample-Frame ist die Menge aller Werte für alle Kanäle, die zu einem bestimmten Zeitpunkt wiedergegeben werden: alle Samples aller Kanäle, die gleichzeitig wiedergegeben werden – zwei bei Stereoton, sechs bei 5.1 usw.

Die Abtastrate ist die Anzahl dieser Samples – oder Frames, da alle Samples eines Frames gleichzeitig wiedergegeben werden –, die innerhalb einer Sekunde wiedergegeben werden, gemessen in Hz. Je höher die Abtastrate, desto besser die Klangqualität.

Betrachten wir einen Mono- und einen Stereo-Audiopuffer, jeweils eine Sekunde lang bei einer Rate von 44100 Hz:

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

Wenn ein Puffer wiedergegeben wird, hören Sie zuerst den am weitesten links liegenden Sample-Frame, dann den direkt daneben, anschließend den nächsten und so weiter, bis zum Ende des Puffers. Bei Stereo hören Sie beide Kanäle gleichzeitig. Sample-Frames sind praktisch, da sie unabhängig von der Kanalanzahl sind und Zeit auf eine für präzise Audiomanipulation ideale Weise darstellen.

Hier sind einige einfache Beispiele:

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

Wenn Sie den obigen Aufruf verwenden, erhalten Sie einen Stereopuffer mit zwei Kanälen, der bei Wiedergabe in einem mit 44100 Hz laufenden AudioContext – was sehr häufig ist, da die meisten üblichen Soundkarten mit dieser Rate arbeiten – 0,5 Sekunden dauert: 22.050 Frames/44.100 Hz = 0,5 Sekunden.

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

Wenn Sie diesen Aufruf verwenden, erhalten Sie einen Monopuffer (Puffer mit einem Kanal), der bei Wiedergabe in einem mit 44.100 Hz laufenden AudioContext automatisch auf 44.100 Hz neu abgetastet wird – und somit 44.100 Frames ergibt – und 1,0 Sekunde dauert: 44.100 Frames/44.100 Hz = 1 Sekunde.

Planare und verschachtelte Puffer

Die Web Audio API verwendet ein planares Pufferformat. Die linken und rechten Kanäle werden wie folgt gespeichert:

LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)

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

Die Alternative ist ein verschachteltes Pufferformat:

LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)

Dieses Format ist verbreitet für das Speichern und Wiedergeben von Audio ohne umfangreiche Verarbeitung, beispielsweise .WAV-Dateien oder einen dekodierten MP3-Stream.

Da die Web Audio API für die Verarbeitung konzipiert ist, stellt sie nur planare Puffer bereit. Sie verwendet das planare Format, wandelt die Audiodaten jedoch in das verschachtelte Format um, wenn sie zur Wiedergabe an die Soundkarte gesendet werden. Umgekehrt beginnt die API beim Dekodieren einer MP3 mit dem verschachtelten Format und wandelt es zur Verarbeitung in das planare Format um.

Audiokanäle

Jeder Audiopuffer kann 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-Einstellungen wie Quad und 5.1, die dank ihrer hohen Kanalanzahl zu einem intensiveren Klangerlebnis führen können. Üblicherweise stellen wir die Kanäle mit den folgenden Standardabkürzungen dar:

Hochmischen und Heruntermischen

Wenn die Kanalanzahl von Ein- und Ausgang nicht übereinstimmt, muss hoch- oder heruntergemischt werden. Dabei gelten die folgenden Regeln, die durch das Setzen der Eigenschaft AudioNode.channelInterpretation auf speakers oder discrete gesteuert werden:

Visualisierungen

Im Allgemeinen verwenden wir die Ausgabe über die Zeit, um Audiovisualisierungen zu erzeugen, und lesen dafür meist deren Verstärkungs- oder Frequenzdaten. Anschließend wandeln wir die erhaltenen Daten mithilfe eines Grafikwerkzeugs in eine visuelle Darstellung, beispielsweise ein Diagramm, um. Die Web Audio API stellt einen AnalyserNode bereit, der das durch ihn laufende Audiosignal nicht verändert. Außerdem gibt er die Audiodaten aus, sodass wir sie mithilfe einer Technologie wie <canvas> verarbeiten können.

Sie können Daten mit den folgenden Methoden abrufen:

AnalyserNode.getFloatFrequencyData()

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

AnalyserNode.getByteFrequencyData()

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

AnalyserNode.getFloatTimeDomainData()

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

AnalyserNode.getByteTimeDomainData()

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

Verräumlichung

Die Audioverräumlichung ermöglicht es uns, die Position und das Verhalten eines Audiosignals an einem bestimmten Punkt im physischen Raum zu modellieren und zu simulieren, wie der Zuhörer dieses Audio hört. In der Web Audio API wird die Verräumlichung durch PannerNode und AudioListener verarbeitet.

Der Panner verwendet rechtshändige kartesische Koordinaten, um die Position der Audioquelle als Vektor und ihre Orientierung als gerichteten 3D-Kegel zu beschreiben. Der Kegel kann beispielsweise bei omnidirektionalen Quellen recht groß sein.

Ebenso beschreibt die Web Audio API den Zuhörer mit rechtshändigen kartesischen Koordinaten: seine Position als einen Vektor und seine Orientierung als zwei Richtungsvektoren, up und front. Diese Vektoren definieren die Richtung des oberen Teils des Kopfes des Zuhörers sowie die Richtung, in die dessen Nase zeigt. Die Vektoren stehen senkrecht aufeinander.

Fan-in und Fan-out

Im Audiobereich beschreibt Fan-in den Prozess, bei dem ein ChannelMergerNode eine Reihe von Mono-Eingangsquellen aufnimmt und ein einzelnes Mehrkanalsignal ausgibt:

Fan-out beschreibt den umgekehrten Prozess: Ein ChannelSplitterNode nimmt eine Mehrkanal-Eingangsquelle auf und gibt mehrere Mono-Ausgangssignale aus: