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 AudioWorkletNodes 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örigen AudioWorkletNode verwendet wird. Das andere Ende ist unter der port-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 AudioParams (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 AudioParams 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 AudioParams während der Instanzierung 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 die Knoten-Ausgabe entsprechend gestalten können.

Audioverarbeitung

Ein Beispielalgorithmus zur Erstellung eines benutzerdefinierten Audiobearbeitungsmechanismus ist:

  1. Erstellen Sie eine separate Datei;

  2. In der Datei:

    1. Erweitern Sie die AudioWorkletProcessor-Klasse (siehe Abschnitt "Abgeleitete Klassen") und stellen Sie Ihre eigene process()-Methode darin bereit;
    2. Registrieren Sie den Prozessor mit der Methode AudioWorkletGlobalScope.registerProcessor();
  3. Laden Sie die Datei mit der Methode addModule() auf die audioWorklet-Eigenschaft Ihres Audiokontexts;

  4. Erstellen Sie einen AudioWorkletNode basierend auf dem Prozessor. Der Prozessor wird intern durch den AudioWorkletNode-Konstruktor instanziiert.

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

js
// 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.

js
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

Siehe auch