🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

AudioWorkletについて調べたメモ

[WebAudio API] AudioWorklet の使い方 | g200kg Music & Software

この大先生の記事を読んで、自分の知ってるWebAudio知識のアップデートをしときたいなーと思って調べたことのメモです。

なので重複する部分もあるけど、+ αな部分もあります。

20191129: あらためて読み直したけど、特に更新すべき部分はない

そもそも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`経由で渡す
  • `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月・・。

その他

TypeScript

放置されてる感あるのでPRをいきなり送るのもナァって感じ。

対応ブラウザ

Chromeでしか動きません!

Firefoxも`AudioWorklet`はまだで、Safariなんか未だに`webkitAudioContext`しか生えてないしお通夜です。