Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

AudioWorkletProcessor

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2021 browserübergreifend verfügbar.

Das AudioWorkletProcessor-Interface der Web Audio API repräsentiert den Audioverarbeitungscode hinter einem benutzerdefinierten AudioWorkletNode. Es lebt im AudioWorkletGlobalScope und läuft im Rendering-Thread der Web-Audio-Anwendung. Ein darauf basierender AudioWorkletNode läuft wiederum im Haupt-Thread.

Konstruktor

Hinweis: Der AudioWorkletProcessor und die von ihm abgeleiteten Klassen können nicht direkt durch vom Benutzer bereitgestellten Code instanziiert werden. Stattdessen werden sie nur intern durch die Erstellung eines zugehörigen AudioWorkletNode erstellt. Der Konstruktor der abgeleiteten Klasse wird mit einem Optionen-Objekt aufgerufen, sodass individuelle Initialisierungsverfahren durchgeführt werden können — siehe die Seite zum Konstruktor 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 dem AudioWorkletNode, zu dem er gehört, verwendet wird. Das andere Ende ist unter der port-Eigenschaft des Knotens verfügbar.

Instanz-Methoden

Das AudioWorkletProcessor-Interface definiert keine eigenen Methoden. Allerdings müssen Sie eine process()-Methode bereitstellen, die aufgerufen wird, um den Audiostream zu verarbeiten.

Ereignisse

Das AudioWorkletProcessor-Interface reagiert auf keine Ereignisse.

Verwendungshinweise

Abgeleitete 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 besitzen. Diese Methode wird für jeden Block von 128 Sample-Frames aufgerufen und nimmt Eingabe- und Ausgabearrays sowie berechnete Werte von benutzerdefinierten AudioParams (falls sie definiert sind) als Parameter an. Sie können Eingaben und Audioparameterwerte verwenden, um das Ausgabe-Array zu füllen, das standardmäßig Stille enthält.

Optional, wenn Sie benutzerdefinierte AudioParams auf Ihrem Knoten haben möchten, können Sie eine parameterDescriptors-Eigenschaft als statischen Getter am Prozessor bereitstellen. 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 Knotenausgang entsprechend gestalten können.

Audioverarbeitung

Ein Beispielalgorithmus zur Erstellung eines benutzerdefinierten Audioverarbeitungsmechanismus ist:

  1. Erstellen Sie eine separate Datei;

  2. In der Datei:

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

  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);

Anschließend laden wir in unserem Hauptskript die Prozessor-Datei, erstellen eine Instanz von AudioWorkletNode, übergeben den Namen des Prozessors und verbinden den Knoten mit einem Audiographen.

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

Spezifikation
Web Audio API
# AudioWorkletProcessor

Browser-Kompatibilität

Siehe auch