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 AudioWorkletNodes 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
portSchreibgeschützt-
Gibt einen
MessagePortzurück, der für die bidirektionale Kommunikation zwischen dem Prozessor und demAudioWorkletNode, zu dem er gehört, verwendet wird. Das andere Ende ist unter derportEigenschaft 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 AudioParams (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 AudioParams 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 AudioParams während der Instanziierung des AudioWorkletNode zu erstellen.
Die resultierenden AudioParams 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
AudioWorkletNodebasierend 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> |
Browser-Kompatibilität
Loading…