WebpackでAudioWorkletを使用するときにつまずいたこと気づいたこと


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.inlinefalseにする

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以上のものを扱う場合は使用できなさそうです。