AudioWorkletProcessor
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Das AudioWorkletProcessor
-Interface der Web Audio API repräsentiert den Audioverarbeitungscode hinter einem benutzerdefinierten AudioWorkletNode
. Es befindet sich im AudioWorkletGlobalScope
und läuft auf dem Web Audio-Rendering-Thread. Ein darauf basierender AudioWorkletNode
läuft im Gegenzug auf dem Haupt-Thread.
Konstruktor
Hinweis:
Der AudioWorkletProcessor
und Klassen, die davon abgeleitet sind, können nicht direkt durch vom Benutzer bereitgestellten Code instanziiert werden. Stattdessen werden sie intern nur durch die Erstellung eines zugehörigen AudioWorkletNode
s erzeugt. Der Konstruktor der abgeleiteten Klasse wird mit einem Optionsobjekt aufgerufen, sodass Sie benutzerdefinierte Initialisierungsverfahren durchführen können — siehe die Konstruktorseite für Details.
AudioWorkletProcessor()
-
Erstellt eine neue Instanz eines
AudioWorkletProcessor
-Objekts.
Instanz-Eigenschaften
port
Schreibgeschützt-
Gibt einen
MessagePort
zurück, der für die bidirektionale Kommunikation zwischen dem Prozessor und demAudioWorkletNode
, zu dem er gehört, verwendet wird. Das andere Ende ist unter derport
Eigenschaft des Knotens verfügbar.
Instanz-Methoden
Das AudioWorkletProcessor
-Interface definiert keine eigenen Methoden. Sie müssen jedoch eine process()
-Methode bereitstellen, die aufgerufen wird, um den Audiostrom zu verarbeiten.
Ereignisse
Das AudioWorkletProcessor
-Interface reagiert auf keine Ereignisse.
Nutzungshinweise
Ableitende Klassen
Um benutzerdefinierten Audioverarbeitungscode zu definieren, müssen Sie eine Klasse vom AudioWorkletProcessor
-Interface ableiten. Obwohl nicht im Interface definiert, muss die abgeleitete Klasse die process
-Methode haben. Diese Methode wird für jeden Block von 128 Sample-Frames aufgerufen und nimmt Eingangs- und Ausgangs-Arrays sowie berechnete Werte benutzerdefinierter AudioParam
s (falls sie definiert sind) als Parameter entgegen. Sie können Eingaben und Audioparameterwerte verwenden, um das Ausgabearray zu füllen, das standardmäßig Stille enthält.
Optional können Sie, wenn Sie benutzerdefinierte AudioParam
s auf Ihrem Knoten wünschen, eine parameterDescriptors
-Eigenschaft als einen statischen Getter auf dem Prozessor angeben. Das zurückgegebene Array von auf AudioParamDescriptor
basierenden Objekten wird intern verwendet, um die AudioParam
s während der Instanziierung des AudioWorkletNode
zu erstellen.
Die resultierenden AudioParam
s befinden sich in der parameters
-Eigenschaft des Knotens und können mit Standardmethoden wie linearRampToValueAtTime
automatisiert werden. Ihre berechneten Werte werden in die process()
-Methode des Prozessors übergeben, damit Sie den Knoten-Ausgang entsprechend formen können.
Audioverarbeitung
Ein Beispielalgorithmus zum Erstellen eines benutzerdefinierten Audiobearbeitungsmechanismus ist:
-
Erstellen Sie eine separate Datei;
-
In der Datei:
- Erweitern Sie die
AudioWorkletProcessor
-Klasse (siehe Abschnitt "Ableitende Klassen") und geben Sie Ihre eigeneprocess()
-Methode an; - Registrieren Sie den Prozessor mit der
AudioWorkletGlobalScope.registerProcessor()
-Methode;
- Erweitern Sie die
-
Laden Sie die Datei mit der
addModule()
-Methode auf deraudioWorklet
-Eigenschaft Ihres Audiokontexts; -
Erstellen Sie einen
AudioWorkletNode
basierend auf dem Prozessor. Der Prozessor wird intern durch denAudioWorkletNode
-Konstruktor instanziiert. -
Verbinden Sie den Knoten mit den anderen Knoten.
Beispiele
Im folgenden Beispiel erstellen wir einen benutzerdefinierten AudioWorkletNode
, der weißes Rauschen ausgibt.
Zuerst müssen wir einen benutzerdefinierten AudioWorkletProcessor
definieren, der weißes Rauschen ausgibt, und ihn registrieren. Beachten Sie, dass dies in einer separaten Datei geschehen sollte.
// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
process(inputs, outputs, parameters) {
const output = outputs[0];
output.forEach((channel) => {
for (let i = 0; i < channel.length; i++) {
channel[i] = Math.random() * 2 - 1;
}
});
return true;
}
}
registerProcessor("white-noise-processor", WhiteNoiseProcessor);
Als nächstes laden wir im Hauptskript die Prozessor-Datei, erstellen eine Instanz des AudioWorkletNode
, übergeben ihm den Namen des Prozessors und verbinden dann den Knoten mit einem Audiographen.
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("white-noise-processor.js");
const whiteNoiseNode = new AudioWorkletNode(
audioContext,
"white-noise-processor",
);
whiteNoiseNode.connect(audioContext.destination);
Spezifikationen
Specification |
---|
Web Audio API # AudioWorkletProcessor |