Grundkonzepte hinter der Web Audio API

Audiographen

Die Web Audio API umfasst das Verwalten von Audiovorgängen innerhalb eines Audio-Kontextes, und ist so konzipiert, dass sie modular routing ermöglicht. Jedes Audio-Knoten führt eine grundlegende Audiooperation aus 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 einzelnen Kontextes. Dieses modulare Design bietet die Flexibilität, komplexe Audiofunktionen mit dynamischen Effekten zu erstellen.

Audio-Knoten werden über ihre Eingänge und Ausgänge verbunden und bilden eine Kette, die mit einer oder mehreren Quellen beginnt, über einen oder mehrere Knoten verläuft und dann an einem Ziel endet (obwohl Sie kein Ziel bereitstellen müssen, wenn Sie nur einige Audiodaten visualisieren möchten). Ein einfacher, typischer Arbeitsablauf für Web-Audio könnte folgendermaßen aussehen:

1. Erstellen Sie den Audio-Kontext.
2. Erstellen Sie Audioquellen innerhalb des Kontextes (wie <audio>, einen Oszillator oder einen Stream).
3. Erstellen Sie Audiodaten-Effekte (wie den Reverb, Biquadratsfilter, Panner oder Kompressor-Knoten).
4. Wählen Sie das endgültige Ziel für das Audio (wie die Lautsprecher des Benutzer-PCs).
5. Verbinden Sie die Quell-Knoten mit null oder mehr Effekt-Knoten und dann mit dem gewählten Ziel.

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

Sie haben mehrere Möglichkeiten, Audio zu erhalten:

• Ton kann direkt in JavaScript von einem Audio-Knoten (wie einem Oszillator) generiert werden.
• Er kann aus rohen PCM-Daten erstellt werden (wie .WAV-Dateien oder andere Formate, die von decodeAudioData() unterstützt werden).
• Er kann aus HTML-Media-Elementen generiert werden, wie <video> oder <audio>.
• Er kann aus einem WebRTC MediaStream stammen, wie z.B. einer Webcam oder einem Mikrofon.

Audiodaten: was in einem Sample steckt

Wenn ein Audiosignal verarbeitet wird, erfolgt die Abtastung. Abtastung ist die Umwandlung eines kontinuierlichen Signals in ein diskretes Signal. Anders ausgedrückt, eine kontinuierliche Schallwelle, wie ein Live-Auftritt einer Band, wird in eine Folge digitaler Samples (ein diskretes Zeitsignal) umgewandelt, das es einem Computer ermöglicht, das Audio in diskreten Blöcken zu verarbeiten.

Mehr Informationen finden Sie auf der Wikipedia-Seite Sampling (Signalverarbeitung).

Audiodaten-Puffer: Frames, Samples und Kanäle

Ein AudioBuffer ist mit drei Parametern definiert:

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

Ein Sample ist ein einzelner 32-Bit-Float-Wert, der den Wert des Audiostreams zu einem bestimmten Zeitpunkt innerhalb eines bestimmten Kanals (links oder rechts, falls 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 gleichzeitig abspielen (zwei für ein Stereo-Sound, sechs für 5.1 usw.).

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

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

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

Wenn ein Puffer abgespielt wird, hören Sie zuerst das linkeste Sample-Frame, dann das direkt daneben, dann das nächste, und so weiter, bis zum Ende des Puffers. Im Falle von 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 auf ideale Weise für präzise Audiomanipulation darstellen.

Hier sind ein paar einfache Beispiele:

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

Wenn Sie diesen Aufruf oben verwenden, erhalten Sie einen Stereo-Puffer mit zwei Kanälen, der bei einer Wiedergabe in einem AudioContext bei 44100 Hz (sehr verbreitet, 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 (einzelkanaliger Puffer), der bei einer Wiedergabe in einem AudioContext bei 44.100 Hz automatisch auf 44.100 Hz resampled wird (und daher 44.100 Frames erhält) und 1,0 Sekunde dauert: 44.100 Frames/44.100 Hz = 1 Sekunde.

Planare vs. verwobene Puffer

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

LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)

Diese Struktur ist weit verbreitet in der Audiobearbeitung, da sie das unabhängige Bearbeiten jedes Kanals erleichtert.

Die Alternative ist die Verwendung eines verwobenen Pufferformats:

LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)

Dieses Format ist weit verbreitet zum Speichern und Abspielen von Audio ohne viel Bearbeitung, zum Beispiel: .WAV-Dateien oder ein dekodierter MP3-Stream.

Da die Web Audio API für die Verarbeitung konzipiert ist, stellt sie nur Planar-Puffer zur Verfügung. Sie verwendet das Planar-Format, konvertiert das Audio aber in das verwobene Format, wenn es zur Wiedergabe an die Soundkarte gesendet wird. Umgekehrt beginnt die API beim Dekodieren eines MP3 mit dem verwobenen Format und konvertiert es zum Planar-Format zum Verarbeiten.

Audiokanäle

Jeder Audiopuffer kann unterschiedliche Anzahlen an 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 Sets unterstützen Surround-Sound-Einstellungen (wie Quad und 5.1), die dank ihrer hohen Kanalanzahl zu einem reichhaltigeren Klangerlebnis führen können. Wir stellen die Kanäle normalerweise mit den in der unten stehenden Tabelle angegebenen Standardabkürzungen dar:

Up-Mixing und Down-Mixing

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

Visualisierungen

Im Allgemeinen erhalten wir den Ausgang über die Zeit, um Audio-Visualisierungen zu erzeugen, indem wir normalerweise seine Verstärkung oder Frequenzdaten lesen. Dann, mit einem grafischen Tool, wandeln wir die erhaltenen Daten in eine visuelle Darstellung um, z. B. in ein Diagramm. Die Web Audio API bietet einen AnalyserNode, der das Audiosignal, das durch ihn hindurchfließt, nicht verändert. Zusätzlich gibt er die Audiodaten aus, welche uns ermöglicht, diese durch eine Technologie wie <canvas> zu verarbeiten.

Sie können Daten mit den folgenden Methoden abrufen:

AnalyserNode.getFloatFrequencyData()

Kopiert die aktuellen Frequenzdaten in ein Float32Array-Array, das an ihn übergeben wird.

AnalyserNode.getByteFrequencyData()

Kopiert die aktuellen Frequenzdaten in ein Uint8Array (unsigned byte Array), das an ihn übergeben wird.

AnalyserNode.getFloatTimeDomainData()

Kopiert die aktuelle Wellenform- oder Zeitdomaindaten in ein Float32Array-Array, das an ihn übergeben wird.

AnalyserNode.getByteTimeDomainData()

Kopiert die aktuelle Wellenform- oder Zeitdomaindaten in ein Uint8Array (unsigned byte Array), das an ihn übergeben wird.

Räumliche Klangverarbeitung

Die räumliche Klangverarbeitung ermöglicht es uns, die Position und das Verhalten eines Audiosignals an einem bestimmten Punkt im physischen Raum zu modellieren, um zu simulieren, wie der Hörer dieses Audio hört. In der Web Audio API wird die räumliche Klangverarbeitung durch den PannerNode und den AudioListener gehandhabt.

Der Panner verwendet rechtshändige kartesische Koordinaten, um die Position der Audioquelle als Vektor und ihre Orientierung als einen 3D-Richtungskegel zu beschreiben. Der Kegel kann recht groß sein, zum Beispiel für omnidirektionale Quellen.

Ähnlich beschreibt die Web Audio API den Hörer mit rechtshändigen kartesischen Koordinaten: seine Position als ein Vektor und seine Orientierung als zwei Richtungsvektoren, Oben und Vorne. Diese Vektoren definieren die Richtung des oberen Teils des Kopfes des Hörers und die Richtung, in die die Nase des Hörers zeigt. Die Vektoren sind zueinander senkrecht.

Fan-In und Fan-Out

In Audiobegriffen beschreibt Fan-In den Prozess, bei dem ein ChannelMergerNode eine Reihe von Mono-Eingangsquellen nimmt und ein einziges multisignaliges Signal ausgibt:

Fan-Out beschreibt den entgegengesetzten Prozess, bei dem ein ChannelSplitterNode eine multisignalige Eingangsquelle nimmt und mehrere Mono-Ausgangssignale ausgibt: