🤖
AudioWorklet の The user aborted a request が出る問題
はじめに
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");
Discussion