AudioWorklet で Uncaught (in promise) DOMException: The user aborted a request が出る問題 #Next.js

はじめに

AudioWorklet を使った時にUncaught (in promise) DOMException: The user aborted a requestのエラーではまったので、書いてみました！！

まず nextjs でプロジェクトを作成

今回は nextjs のプロジェクトで起きたので nextjs で書きます。

下記で立ち上げてください。

npx create-next-app@latest

AudioWorklet の準備

MDN を参考にして、AudioWorklet を触っていきます。

white-noise-processor.js

class WhiteNoiseProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach((channel) => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() * 2 - 1;
      }
    });
    return true;
  }
}

registerProcessor("white-noise-processor", WhiteNoiseProcessor);

hooks.ts

 const audioContext = new AudioContext();
 await audioContext.audioWorklet.addModule("white-noise-processor.js");
 const whiteNoiseNode = new AudioWorkletNode(audioContext, "white-noise-processor");
 whiteNoiseNode.connect(audioContext.destination);

問題

white-noise-processor.js を hooks.ts と同じディレクトリにしていたけど、 Uncaught (in promise) DOMException: The user aborted a requestというエラーが出て叩けない。。。

解決策

public フォルダーにAudioWorkletProcessorで書いたファイルを置く。
恐らく、サービスワーカーのため public フォルダーに置く必要がある。

余談

public フォルダーに置いてもアクセス出来ない時は先頭に/を書くと出来る場合がある。
await audioContext.audioWorklet.addModule("white-noise-processor.js");
await audioContext.audioWorklet.addModule("/white-noise-processor.js");