AudioWorkletについて調べたメモ

そもそもAudioWorklet

Enter Audio Worklet  |  Web  |  Google Developers

• `ScriptProcessorNode`の後継
• 重い音声処理をメインスレッドでやりたくないよね
  • いちおうAudioスレッドでやってたけど、完全ではなかった
• 今度こそAudioスレッドだけでできるよ

2017年12月の記事なんかこれ・・時代を感じる・・。

コード

まずは使う側。

// app.js
// いつものGlobalScope
(async function() {
  // お決まり
  const ctx = new AudioContext();

  // Workerみたく読み込んで使う
// このパスはESModules的なパスではなく、ドキュメントルートからのルート
  await ctx.audioWorklet.addModule('./my-worklet.js')

  // 使うのに必要なのはノード名だけ
  const workletNode = new AudioWorkletNode(ctx, 'my-worklet');

  // あとは今まで通りのAudioNodeとして使えば良し
  workletNode.connect(ctx.destination);

  // どんなAudioParamsにするかも自分で決める
  workletNode.dummy.value = 1;

  // MessagePortが生えてるので、直接なんかすることもできる
  workletNode.port.onmessage = ev => {};
  workletNode.port.start();
  workletNode.port.postMessage('xxx');
}());

メインのWorklet側。

// my-worklet.js
// AudioWorkletGlobalScopeになってる
class MyWorkletProcessor extends AudioWorkletProcessor {
  // AudioParamsの指定
  static get parameterDescriptors () {
      return [{
          name: 'dummy',
          defaultValue: 0.5,
          minValue: 0,
          maxValue: 1,
          automationRate: "k-rate"
      }];
  }

  // これが本丸
  process(inputs, outputs, parameters) {
    // outputsを、inputsとparameters.dummyでいじる

    // 生えてるのでよしなに使えばよい
    this.port.postMessage('x');
    
    return true;
  }
}

// WebComponentsみたいに登録する
registerProcessor('my-worklet', MyWorkletProcessor);

このへんのAPIの詳しく・サンプルは、冒頭の記事 or 仕様を見るべし。

Web Audio API

WASM

`AudioWorklet`ではWASMが使えるぜ的な触れ込みだったと思うので、そこも調べた。

デフォルトでなんかそういう機能があるのではなく、組み合わせて使えるというだけの話。

どうやら2パターンの使い方がある。

• メインスレッドでWASMを`fetch()`してで読み込んで、`port`経由で渡す
  • WASMをインスタンスにするのは`AudioWorkletProcessor`側でもできる
• `AudioWorkletProcessor`側で、JSにしたWASMを直接`import`する

どっちを選ぶかは要件次第。
でもほとんど後者なのでは・・？

ということが書いてある記事がこれ。

Audio Worklet Design Pattern  |  Web  |  Google Developers

記事内デモのサンプルコードのリポジトリ。

web-audio-samples/audio-worklet/design-pattern at master · GoogleChromeLabs/web-audio-samples · GitHub

2018年6月・・。

その他