Grundlegende Konzepte hinter der Web Audio API

Die Web Audio API beinhaltet die Verarbeitung von Audiooperationen innerhalb eines Audio-Kontextes und wurde entwickelt, um modulare Signalführung zu ermöglichen. Jeder Audio-Knoten führt eine grundlegende Audiooperation durch und ist mit einem oder mehreren anderen Audio-Knoten verbunden, um einen Audio-Routing-Graphen zu bilden. Mehrere Quellen mit unterschiedlichen Kanal-Layouts werden unterstützt, sogar innerhalb eines einzigen Kontexts. Dieses modulare Design bietet die Flexibilität, komplexe Audiofunktionen mit dynamischen Effekten zu erstellen.

Audio-Knoten sind über ihre Ein- und Ausgänge verbunden und bilden eine Kette, die mit einer oder mehreren Quellen beginnt, durch einen oder mehrere Knoten verläuft und dann an einem Ziel endet (obwohl Sie kein Ziel angeben müssen, wenn Sie nur einige Audiodaten visualisieren möchten). Ein einfacher, typischer Workflow für Web-Audio würde in etwa so aussehen:

1. Erstellen Sie den Audio-Kontext.
2. Erstellen Sie Audioquellen innerhalb des Kontexts (wie <audio>, einen Oszillator oder Stream).
3. Erstellen Sie Audioeffekte (wie die Hall-, Biquad-Filter-, Panner-, oder Kompressor-Knoten).
4. Wählen Sie das endgültige Ziel für das Audio (wie die Lautsprecher des Benutzers).
5. Verbinden Sie die Quellknoten mit null oder mehr Effekt-Knoten und dann mit dem gewählten Ziel.

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

Es gibt mehrere Möglichkeiten, um Audio zu erhalten:

• Der Sound kann direkt in JavaScript von einem Audio-Knoten (wie einem Oszillator) generiert werden.
• Er kann aus rohen PCM-Daten erstellt werden (zum Beispiel .WAV-Dateien oder andere Formate, die von decodeAudioData() unterstützt werden).
• Er kann von HTML-Media-Elementen wie <video> oder <audio> generiert werden.
• Er kann von einem WebRTCMediaStream wie einer Webcam oder einem Mikrofon erlangt werden.

Wenn ein Audiosignal verarbeitet wird, erfolgt eine Abtastung. Abtastung ist die Umwandlung eines kontinuierlichen Signals in ein diskretes Signal. Anders ausgedrückt, eine kontinuierliche Schallwelle, wie sie von einer Band live gespielt wird, wird in eine Abfolge von digitalen Samples (ein diskretes Zeitsignal) umgewandelt, die es einem Computer ermöglichen, das Audio in getrennten Blöcken zu verarbeiten.

Weitere Informationen finden Sie auf der Wikipedia-Seite Abtastung (Signalverarbeitung).

Ein AudioBuffer ist mit drei Parametern definiert:

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

Ein Sample ist ein einzelner 32-Bit-Gleitkommawert, der den Wert des Audio-Streams zu jedem bestimmten Zeitpunkt innerhalb eines bestimmten Kanals (links oder rechts, im Fall von Stereo) repräsentiert. Ein Frame oder Sample-Frame ist die Menge aller Werte für alle Kanäle, die zu einem bestimmten Zeitpunkt abgespielt werden: alle Samples aller Kanäle, die zur gleichen Zeit abgespielt werden (zwei für einen Stereo-Sound, sechs für 5.1 usw.).

Die Abtastrate ist die Menge dieser Samples (oder Frames, da alle Samples eines Frames gleichzeitig abgespielt werden), die in einer Sekunde abgespielt werden und wird in Hz gemessen. Je höher die Abtastrate, desto besser die Klangqualität.

Schauen wir uns einen Mono und einen Stereo Audiopuffer an, die jeweils eine Sekunde lang bei einer Rate von 44100Hz sind:

• Der Mono-Puffer hat 44.100 Samples und 44.100 Frames. Die Eigenschaft length wird 44.100 sein.
• Der Stereo-Puffer hat 88.200 Samples, aber immer noch 44.100 Frames. Die Eigenschaft length wird immer noch 44.100 sein, da sie gleich der Anzahl der Frames ist.

Wenn ein Puffer abgespielt wird, hören Sie zuerst den ganz links befindlichen Sample-Frame, dann den direkt daneben, dann den nächsten und so weiter bis zum Ende des Puffers. Im Fall von Stereo hören Sie beide Kanäle gleichzeitig. Sample-Frames sind praktisch, da sie unabhängig von der Anzahl der Kanäle sind und die Zeit auf ideale Weise für präzise Audiomanipulation darstellen.

Hier sind einige einfache Beispiele:

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

Wenn Sie den obigen Aufruf verwenden, erhalten Sie einen Stereo-Puffer mit zwei Kanälen, der beim Abspielen auf einem AudioContext, der bei 44.100 Hz läuft (sehr häufig, die meisten normalen Soundkarten laufen mit dieser Rate), 0,5 Sekunden dauert: 22.050 Frames/44.100 Hz = 0,5 Sekunden.

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

Wenn Sie diesen Aufruf verwenden, erhalten Sie einen Mono-Puffer (Einkanal-Puffer), der beim Abspielen auf einem AudioContext, der bei 44.100 Hz läuft, automatisch auf 44.100 Hz neu abgetastet wird (und daher 44.100 Frames ergibt) und 1,0 Sekunde dauert: 44.100 Frames/44.100 Hz = 1 Sekunde.

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

LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)

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

Die Alternative ist die Verwendung eines verschachtelten Pufferformats:

LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)

Dieses Format ist häufig für die Speicherung und Wiedergabe von Audio ohne große Bearbeitung, zum Beispiel: .WAV-Dateien oder ein decodierter MP3-Stream.

Da die Web Audio API auf die Verarbeitung ausgelegt ist, bietet sie nur planare Puffer. Sie verwendet das planare Format, konvertiert das Audio jedoch beim Senden an die Soundkarte zur Wiedergabe in ein verschachteltes Format. Umgekehrt, wenn die API einen MP3 decodiert, beginnt sie mit dem verschachtelten Format und wandelt es zur Verarbeitung in das planare Format um.

Jeder Audiopuffer kann unterschiedliche Anzahlen von Kanälen enthalten. Die meisten modernen Audiogeräte verwenden die grundlegenden Mono- (nur ein Kanal) und Stereo- (linke und rechte Kanäle) Einstellungen. Einige komplexere Geräte unterstützen Surround Sound-Einstellungen (wie Quad und 5.1), was zu einem reichhaltigeren Klangerlebnis führen kann, dank ihrer hohen Kanalanzahl. Wir repräsentieren die Kanäle in der Regel mit den standardmäßigen Abkürzungen, die in der folgenden Tabelle aufgeführt sind:

Wenn die Anzahl der Kanäle des Eingangs und des Ausgangs nicht übereinstimmen, muss ein Up-Mixing oder Down-Mixing durchgeführt werden. Die folgenden Regeln, die durch die Einstellung der AudioNode.channelInterpretation-Eigenschaft auf speakers oder discrete gesteuert werden, gelten:

Im Allgemeinen erhalten wir den Ausgang im Laufe der Zeit, um Audio-Visualisierungen zu erzeugen, normalerweise durch Lesen der Verstärkung oder Frequenzdaten. Dann verwenden wir ein grafisches Werkzeug, um die gewonnenen Daten in eine visuelle Darstellung, wie ein Diagramm, umzuwandeln. Die Web Audio API verfügt über einen AnalyserNode, der das durchlaufende Audiosignal nicht verändert. Darüber hinaus gibt er die Audiodaten aus, was uns ermöglicht, sie mit einer Technologie wie <canvas> zu verarbeiten.

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 (unsigned Byte Array).

AnalyserNode.getFloatTimeDomainData()

Kopiert die aktuelle Wellenform oder Zeit-Domänendaten in ein übergebenes Float32Array Array.

AnalyserNode.getByteTimeDomainData()

Kopiert die aktuelle Wellenform oder Zeit-Domänendaten in ein übergebenes Uint8Array (unsigned Byte Array).

Die Audio-Raumklangerweiterung ermöglicht uns, die Position und das Verhalten eines Audiosignals an einem bestimmten Punkt im physischen Raum zu modellieren, um zu simulieren, dass der Zuhörer dieses Audio hört. In der Web Audio API wird die Raumklangerweiterung durch den PannerNode und den AudioListener behandelt.

Der Panner verwendet ein kartesisches Koordinatensystem, um die Position der Audioquelle als Vektor und ihre Orientierung als 3D-Richtkegel zu beschreiben. Der Kegel kann ziemlich groß sein, zum Beispiel für omnidirektionale Quellen.

Ebenso beschreibt die Web Audio API den Zuhörer mit einem kartesischen Koordinatensystem: Seine Position als Vektor und seine Orientierung als zwei Richtungsvektoren, oben und vorne. Diese Vektoren definieren die Richtung des Kopfes des Zuhörers und die Richtung, in die die Nase des Zuhörers zeigt. Die Vektoren sind zueinander senkrecht.

Im Audiobereich beschreibt Fan-in den Vorgang, bei dem ein ChannelMergerNode eine Serie von Mono-Eingangsquellen aufnimmt und ein einziges Mehrkanalsignal als Ausgang erzeugt:

Fan-out beschreibt den entgegengesetzten Vorgang, bei dem ein ChannelSplitterNode eine Mehrkanal-Eingangsquelle aufnimmt und mehrere Mono-Ausgangssignale erzeugt: