問題描述

我正在嘗試在我的電子應用程序中使用 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...

這篇關于在電子中使用 AudioWorklet (DOMException: The user aborted a request)的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！