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 einen Audiobearbeitungscode hinter einem benutzerdefinierten AudioWorkletNode
. Es befindet sich im AudioWorkletGlobalScope
und läuft im Web Audio Rendering-Thread. Im Gegenzug läuft ein darauf basierender AudioWorkletNode
im Haupt-Thread.
Konstruktor
Hinweis:
Der AudioWorkletProcessor
und die davon abgeleiteten Klassen können nicht direkt vom Benutzer-Code instanziiert werden. Stattdessen werden sie nur intern durch die Erstellung eines zugehörigen AudioWorkletNode
s erzeugt. Der Konstruktor der abgeleiteten Klasse wird mit einem Optionsobjekt aufgerufen, damit Sie eine benutzerdefinierte Initialisierungsprozedur durchführen können — Details dazu finden Sie auf der Constructor-Seite.
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 dem zugehörigenAudioWorkletNode
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 Audiostream zu verarbeiten.
Ereignisse
Das AudioWorkletProcessor
-Interface reagiert auf keine Ereignisse.
Anwendungshinweise
Abgeleitete Klassen
Um einen benutzerdefinierten Audiobearbeitungscode zu definieren, müssen Sie eine Klasse aus dem AudioWorkletProcessor
-Interface ableiten. Obwohl es nicht im Interface definiert ist, muss die abgeleitete Klasse die process
-Methode enthalten. Diese Methode wird für jeden Block von 128 Sample-Frames aufgerufen und nimmt Eingabe- und Ausgabe-Arrays sowie berechnete Werte benutzerdefinierter AudioParam
s (falls definiert) als Parameter entgegen. Sie können Eingaben und Audioparameterwerte verwenden, um das Ausgabearray zu füllen, das standardmäßig Stille enthält.
Optional, wenn Sie benutzerdefinierte AudioParam
s auf Ihrem Knoten wollen, können Sie eine parameterDescriptors
-Eigenschaft als statischen Getter auf dem Prozessor bereitstellen. Das zurückgegebene Array von AudioParamDescriptor
-basierten Objekten wird intern verwendet, um die AudioParam
s während der Instanzierung 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 die Knoten-Ausgabe entsprechend gestalten können.
Audioverarbeitung
Ein Beispielalgorithmus zur Erstellung eines benutzerdefinierten Audiobearbeitungsmechanismus ist:
-
Erstellen Sie eine separate Datei;
-
In der Datei:
- Erweitern Sie die
AudioWorkletProcessor
-Klasse (siehe Abschnitt "Abgeleitete Klassen") und stellen Sie Ihre eigeneprocess()
-Methode darin bereit; - Registrieren Sie den Prozessor mit der Methode
AudioWorkletGlobalScope.registerProcessor()
;
- Erweitern Sie die
-
Laden Sie die Datei mit der Methode
addModule()
auf dieaudioWorklet
-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 erfolgen 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 in unserem Hauptskript die Prozessoren, erstellen eine Instanz von AudioWorkletNode
, indem wir ihm den Namen des Prozessors übergeben, und verbinden dann den Knoten mit einem Audiograf.
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 |
Browser-Kompatibilität
BCD tables only load in the browser