5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-03-15

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

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?