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.

ウェブオーディオ APIAudioWorkletProcessor インターフェイスは、独自の AudioWorkletNode が用いる音声処理コードを表します。これは AudioWorkletGlobalScope に存在し、ウェブオーディオレンダリングスレッドで実行されます。一方、対応する AudioWorkletNode はメインスレッドで実行されます。

コンストラクター

メモ: AudioWorkletProcessor とその派生クラスは、ユーザーのコードから直接生成することはできません。これらは対応する AudioWorkletNode の生成に伴って内部でのみ生成されます。派生クラスのコンストラクターはオプションオブジェクトとともに呼ばれるため、独自の初期化処理を行うことができます。詳しくはコンストラクターのページを参照してください。

AudioWorkletProcessor()

新しい AudioWorkletProcessor オブジェクトのインスタンスを生成します。

インスタンスプロパティ

port 読取専用

処理器と対応する AudioWorkletNode の間の双方向通信に用いる MessagePort を返します。もう一方の端は、ノードの port プロパティから参照できます。

インスタンスメソッド

AudioWorkletProcessor インターフェイスは自身のメソッドを定義していません。しかし、音声ストリームを処理するために呼ばれる process() メソッドを定義しなければなりません。

イベント

AudioWorkletProcessor インターフェイスはイベントに反応しません。

使用上の注意点

派生クラスの作成

独自の音声処理コードを定義するには、AudioWorkletProcessor インターフェイスの派生クラスを作る必要があります。このインターフェイスでは定義されていませんが、派生クラスには process メソッドが必要です。このメソッドは 128 サンプルフレームからなるブロックそれぞれについて呼ばれ、入力の配列、出力の配列、(定義されていれば) 独自の AudioParam の計算された値を引数として受け取ります。出力の配列の初期値は無音です。入力と音声パラメーターの値を出力の配列を埋めるのに使用できます。

オプションとして、ノードで独自の AudioParam を使いたい場合、処理器の 静的ゲッター として parameterDescriptors プロパティを定義できます。返される AudioParamDescriptor をベースとするオブジェクトの配列が、AudioWorkletNode の生成時に AudioParam を生成するため用いられます。

生成された AudioParam はノードの parameters プロパティに配置され、linearRampToValueAtTime などの標準メソッドを用いて自動化できます。これらで計算された値は処理器の process() メソッドに渡され、ノードの出力の形成に使用できます。

音声処理

以下に、独自の音声処理の仕組みを作るアルゴリズムの例を示します。

  1. 別のファイルを作ります。

  2. このファイルで以下を行います。

    1. AudioWorkletProcessor クラスを継承 (「派生クラスの作成」の節を参照) し、その中で自身の process() メソッドを定義します。
    2. 作成した処理器を AudioWorkletGlobalScope.registerProcessor() メソッドで登録します。
  3. 音声コンテキストの audioWorklet プロパティの addModule() メソッドで、このファイルを読み込みます。

  4. この処理器をベースとする AudioWorkletNode を生成します。処理器は AudioWorkletNode のコンストラクター内部で生成されます。

  5. 生成したノードを他のノードに接続します。

以下の例では、ホワイトノイズを出力する独自の AudioWorkletNode を作成します。

まず、ホワイトノイズを出力する独自の AudioWorkletProcessor を定義し、登録する必要があります。これは別のファイルで行うことに注意してください。

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

次に、メインスクリプトで処理器をロードし、処理器の名前を渡して AudioWorkletNode のインスタンスを作成し、そのノードを音声グラフに接続します。

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

仕様書

Specification
Web Audio API
# AudioWorkletProcessor

ブラウザーの互換性

BCD tables only load in the browser

関連情報