AudioWorkletについては、こちらの記事(Enter Audio Worklet)などを読んでください。
簡単にお試しする場合は以下のリポジトリがあります。
https://github.com/rinsyan0518/audioworklet-sandbox
Webpackを使用して、AudioWorkletを試すための環境を作成したときに気になったことのまとめです。
webpack-dev-serverの設定
複数のconfigをexportする場合にdevServerプロパティは配列の先頭の方のみ使用されるため、browserとprocessorの両方に設定しても片方のみしか使われなかったです。
Global Objectがwindowではない
AudioWorkletのGlobal ObjectはAudioWorkletGlobalScope
となるようで、output.globalObject
を変更する必要があります。
そのままにすると window
を見にいくため、変数が定義されていないことのエラーが出ます。
devServer.inline
はfalse
にする
trueにした場合、http://localhost:3000/processor.js
にアクセスしたときにHMRのモジュールが入るため、windowオブジェクトが存在しないエラーが発生します。
おそらくhotとhotOnlyをfalseにすれば動くかもしれないです。(sockjsをロードしたときにwindowが入ってくるかもです。。。)
https://github.com/webpack/webpack-dev-server/blob/master/lib/utils/addEntries.js#L7
Polyfillについて
GoogleChroneLabsにaudioworklet-polyfillがあります。
中の処理としては、ScriptProcessorNodeを使用して、AudioWorkletと同じような動作をさせているようです。
こちらを使用する上で気をつけることとして、polyfillの中で、ScriptProcessorNodeを生成するときの引数numberOfInputChannelsが2で固定されていますので、チャンネル数が3以上のものを扱う場合は使用できなさそうです。