Dieser Artikel erklärt einige theoretische Grundlagen der Audioverarbeitung, um zu verstehen, wie die Funktionen der Web Audio API arbeiten. Dies wird Ihnen helfen, fundierte Entscheidungen zu treffen, wenn Sie Ihre App zur Verarbeitung von Audio entwerfen. Wenn Sie noch kein Tontechniker sind, gibt Ihnen dieser Artikel genügend Hintergrundwissen, um zu verstehen, warum die Web Audio API so funktioniert, wie sie es tut.

Audiographen

DieWeb Audio API beinhaltet die Verarbeitung von Audiooperationen innerhalb einesAudio-Kontextes und wurde entwickelt, ummodulare Signalführung zu ermöglichen. JederAudio-Knoten führt eine grundlegende Audiooperation durch und ist mit einem oder mehreren anderen Audio-Knoten verbunden, um einenAudio-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ßlichMono,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 rohenPCM-Daten erstellt werden (zum Beispiel .WAV-Dateien oder andere Formate, die vondecodeAudioData() unterstützt werden).
• Er kann von HTML-Media-Elementen wie<video> oder<audio> generiert werden.
• Er kann von einemWebRTCMediaStream wie einer Webcam oder einem Mikrofon erlangt werden.

Audiodaten: Was in einem Sample steckt

Wenn ein Audiosignal verarbeitet wird, erfolgt eine Abtastung.Abtastung ist die Umwandlung eineskontinuierlichen Signals in eindiskretes 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-SeiteAbtastung (Signalverarbeitung).

Audiopuffer: Frames, Samples und Kanäle

EinAudioBuffer 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.

EinSample 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. EinFrame oderSample-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.).

DieAbtastrate 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 einenMono und einenStereo Audiopuffer an, die jeweils eine Sekunde lang bei einer Rate von 44100Hz sind:

• DerMono-Puffer hat 44.100 Samples und 44.100 Frames. Die Eigenschaftlength wird 44.100 sein.
• DerStereo-Puffer hat 88.200 Samples, aber immer noch 44.100 Frames. Die Eigenschaftlength 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ächstenund 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 einemAudioContext, 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 einemAudioContext, der bei 44.100 Hz läuft, automatisch auf 44.100 Hzneu abgetastet wird (und daher 44.100 Frames ergibt) und 1,0 Sekunde dauert: 44.100 Frames/44.100 Hz = 1 Sekunde.

Planare versus verschachtelte Puffer

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 sienur 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.

Audiokanäle

Jeder Audiopuffer kann unterschiedliche Anzahlen von Kanälen enthalten. Die meisten modernen Audiogeräte verwenden die grundlegendenMono- (nur ein Kanal) undStereo- (linke und rechte Kanäle) Einstellungen. Einige komplexere Geräte unterstützenSurround Sound-Einstellungen (wieQuad und5.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:

Up-Mixing und Down-Mixing

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 derAudioNode.channelInterpretation-Eigenschaft aufspeakers oderdiscrete gesteuert werden, gelten:

Visualisierungen

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 einenAnalyserNode, 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 übergebenesFloat32Array Array.

AnalyserNode.getByteFrequencyData()

Kopiert die aktuellen Frequenzdaten in ein übergebenesUint8Array (unsigned Byte Array).

AnalyserNode.getFloatTimeDomainData()

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

AnalyserNode.getByteTimeDomainData()

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

Raumklang

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 denPannerNode und denAudioListener behandelt.

Der Panner verwendet ein kartesisches Koordinatensystem, um diePosition der Audioquelle als Vektor und ihreOrientierung 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: SeinePosition als Vektor und seineOrientierung als zwei Richtungsvektoren,oben undvorne. 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.

Fan-in und Fan-out

Im Audiobereich beschreibtFan-in den Vorgang, bei dem einChannelMergerNode eine Serie vonMono-Eingangsquellen aufnimmt und ein einziges Mehrkanalsignal als Ausgang erzeugt:

Fan-out beschreibt den entgegengesetzten Vorgang, bei dem einChannelSplitterNode eine Mehrkanal-Eingangsquelle aufnimmt und mehrereMono-Ausgangssignale erzeugt: