在电子中使用AudioWorklet（DOMException：用户中止了请求） [英] Use AudioWorklet within electron (DOMException: The user aborted a request)

问题描述

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

未捕获（在承诺中）DOMException：用户中止了请求。

<在之前，我看到其他人遇到了类似的问题在这里但不幸的是我在堆栈溢出上的声誉不够高，无法直接评论。有关将mime类型更改为application / javascript或text / javascript的建议听起来不错，但我不知道如何强制电子使用特定的mime类型用于特定文件。此外，在网络选项卡的开发人员控制台中，似乎chrome实际上已经为我的processor.js假设了一个javascript文件。

我已经尝试加载了像这样的自定义协议

  protocol.registerStandardSchemes（['worklet']）; 
 
 app.on（'ready'，（）=> {
 protocol.registerHttpProtocol（'worklet'，（req，cb）=> {
 fs.readFile （req.url.replace（'worklet：//'，''），（错误，数据）=> {
 cb（{mimeType：'text / javascript'，data}）; 
 }）; 
}）; 
}）; 
  

然后在添加工作时

  await ctx.audioWorklet.addModule（'worklet：//processor.js'）; 
  

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

获取worklet：//processor.js/ 0（）

未捕获错误：您提供的错误不包含堆栈跟踪。

...

解决方案

如果有人有兴趣，我发现了一个hacky解决方案。
强制mime型电子/铬很高兴我用文件api作为字符串加载worklet文件，将其转换为带有mime-type text / javascript的blob，然后从那个<创建一个对象url / p>

  const processorPath = isDevMode？ 'public / processor.js'：`$ {global .__ dirname} / processor.js`; 
 const processorSource = await readFile（processorPath）; //只是fs.readFile的预定版本
 const processorBlob = new Blob（[processorSource.toString（）]，{type：'text / javascript'}）; 
 const processorURL = URL.createObjectURL（processorBlob）; 
 await ctx.audioWorklet.addModule（processorURL）; 
  

希望这有助于任何人遇到同样的问题......

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.

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 });
    });
  });
});

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 ()
Uncaught Error: The error you provided does not contain a stack trace.
...

解决方案

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...

这篇关于在电子中使用AudioWorklet（DOMException：用户中止了请求）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！