6

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

mmende
  • 181
  • 1
  • 13

2 Answers2

10

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

mmende
  • 181
  • 1
  • 13
  • Great answer! I used to start a local HTTP server to serve the audio-worklet with the correct mime-type set, but your solution is easier (and loads significantly faster with less resources consumed). – John Weisz Dec 13 '18 at 16:03
  • Given the nature of the problem this doesn't seem like all that hacky of a solution to me. It works and isn't all that intrusive anyway. – Rod Apr 12 '20 at 20:59
0

If you're using webpack to compile your source you should be able to use the web-worker loader for your custom worker scripts.

Steve -Cutter- Blades
  • 5,057
  • 2
  • 26
  • 40