在电子中使用 AudioWorklet (DOMException: The user aborted a request)

2022-01-10 00:00:00 electron javascript web-audio-api

我正在尝试在我的电子应用程序中使用 AudioWorklet 进行计量等.在开发模式下执行时工作正常，其中工作集由诸如 http://localhost:3000/processor.js.但是，如果我尝试在 prod 模式下运行该应用程序，则该文件将在本地提供，例如 file://tmp/etc/etc/build/processor.js 并且在开发人员控制台中，我什至可以看到该文件正在正确预览，但我收到此错误消息:

I am trying to use an AudioWorklet within my electron app for metering etc. which works fine when executed in dev mode where the worklet is being served by an express dev server like http://localhost:3000/processor.js. However if I try to run the app in prod mode the file is being served locally like file://tmp/etc/etc/build/processor.js and in the developer-console I can even see the file correctly being previewed but I get this error message:

Uncaught (in promise) DOMException: The user aborted a request.

Uncaught (in promise) DOMException: The user aborted a request.

在在这里但不幸的是，我在堆栈溢出方面的声誉还不够高，无法直接发表评论.将 mime 类型更改为 application/javascript 或 text/javascript 的建议听起来不错，但我不知道如何强制电子对特定文件使用特定的 mime 类型.此外，在网络选项卡的开发者控制台中，似乎 chromium 实际上已经为我的 processor.js 假设了一个 javascript 文件.

I saw that someone else had a similar problem before over here but unfortunately my reputation on stack overflow is not high enough to comment directly. The suggestion there to change the mime-type to application/javascript or text/javascript sounds good but I have no idea how to force electron to use a specific mime-type for a specific file. Furthermore in the developer-console in the network tab it seems like chromium is actually already assuming a javascript file for my processor.js.

我已经尝试使用类似的自定义协议加载工作集

I already tried to load the worklet with a custom protocol like that

protocol.registerStandardSchemes(['worklet']);

app.on('ready', () => {
  protocol.registerHttpProtocol('worklet', (req, cb) => {
    fs.readFile(req.url.replace('worklet://', ''), (err, data) => {
      cb({ mimeType: 'text/javascript', data });
    });
  });
});

然后在添加worklet时

and then when adding the worklet

await ctx.audioWorklet.addModule('worklet://processor.js');

不幸的是，这只以这些错误结束，然后是第一个错误

unfortunately this only ends in these errors followed by the first error

GET worklet://processor.js/0 ()
未捕获的错误:您提供的错误不包含堆栈跟踪.
...

GET worklet://processor.js/ 0 ()
Uncaught Error: The error you provided does not contain a stack trace.
...

推荐答案

如果有人感兴趣，我找到了一个 hacky 解决方案.为了强制使用 mime 类型的电子/铬，我很高兴我将带有文件 api 作为字符串的 worklet 文件加载，将其转换为具有 mime 类型 text/javascript 的 blob，然后从中创建一个对象 url

I found a hacky solution if anybody is interested. To force a mime-type electron / chromium is happy with I load the worklet file with the file api as a string, convert it to a blob with mime-type text/javascript and then create an object url from that

const processorPath = isDevMode ? 'public/processor.js' : `${global.__dirname}/processor.js`;
const processorSource = await readFile(processorPath); // just a promisified version of fs.readFile
const processorBlob = new Blob([processorSource.toString()], { type: 'text/javascript' });
const processorURL = URL.createObjectURL(processorBlob);
await ctx.audioWorklet.addModule(processorURL);

希望这对遇到同样问题的人有所帮助...

Hope this helps anyone having the same problem...

相关文章