Parcel: Loading script to AudioWorklet

[ronkot]

❓Question:

I'm trying to use new AudioWorklet feature (enabled by default in Chrome 66 ->). Part of the process is to load a WorkletProcessorScript to a web worker from my main js file like this:

...
audioContext.audioWorklet.addModule('my-worklet-processor.js').then(() => {
  ...
});

So I'd need to keep my-worklet-processor.js as a separate file. Maybe this is already possible, but I can't find a way to do this. Any clues how to solve this? Big thanks! 🙏

There's not yet good documentation on AudioWorklets, but here and here are some examples I've been using.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.4.1
| Node | 8.9.4
| npm/Yarn | npm 5.7.1
| Operating System | OSX 10.11.6

[mischnic]

Maybe it needs to be added to https://github.com/parcel-bundler/parcel/blob/0140dcea58edd0df5959752e38faf41b96a1d509/src/assets/JSAsset.js#L19 to be treated like a web worker.

[mischnic]

@ronkot What happens currently? Does 'my-worklet-processor.js' get replaced with something else?

[ronkot]

@mischnic my-worklet-processor.js does not seem to get replaced (if I understood your question correctly). File is requested as http://localhost:1234/js/my-worklet-processor.js (running in dev mode), which in turn returns the content of my index.html.

[mischnic]

This correctly detects the calls, but the emitted worklet file contains the hmr runtime.

diff --git a/src/assets/JSAsset.js b/src/assets/JSAsset.js
index 7261c35..6fffbb5 100644
--- a/src/assets/JSAsset.js
+++ b/src/assets/JSAsset.js
@@ -16,7 +16,7 @@ const IMPORT_RE = /\b(?:import\b|export\b|require\s*\()/;
 const GLOBAL_RE = /\b(?:process|__dirname|__filename|global|Buffer)\b/;
 const FS_RE = /\breadFileSync\b/;
 const SW_RE = /\bnavigator\s*\.\s*serviceWorker\s*\.\s*register\s*\(/;
-const WORKER_RE = /\bnew\s*Worker\s*\(/;
+const WORKER_RE = /\bnew\s*Worker\s*\(|audioWorklet\.addModule\s*\(/;

 class JSAsset extends Asset {
   constructor(name, pkg, options) {
diff --git a/src/visitors/dependencies.js b/src/visitors/dependencies.js
index e697db7..4652f81 100644
--- a/src/visitors/dependencies.js
+++ b/src/visitors/dependencies.js
@@ -61,6 +61,13 @@ module.exports = {
       return;
     }

+    if(types.isStringLiteral(args[0]) && types.isMemberExpression(callee) &&
+       callee.object.property && callee.object.property.name === "audioWorklet" &&
+       callee.property.name === "addModule") {
+      addURLDependency(asset, args[0]);
+      return;
+    }
+
     const isRegisterServiceWorker =
       types.isStringLiteral(args[0]) &&
       matchesPattern(callee, serviceWorkerPattern);

[ronkot]

Any news on this? Could I help somehow - by providing a minimal working example for example?

Also, I'd be happy to hear if there's some temporary hack that I could use.

[habemus-papadum]

I would be interested in some basic guidance about this as well.

My thoughts are for now to inline the script as multiline string, convert it to a Blob, and use the Blob's url in addModule.

This looses all the potential transpilation wins parcel provides but since these scripts are meant to be lean and mean, they probably need a tailored transpilation approach anyway (ala glslify, perhaps)

[habemus-papadum]

@mischnic Using your patches suggested above, does the hmr runtime added to the Audio Worklet script cause to script to fail, or is the hmr code functional in the AudioWorklet context (which doesn't seem all that bad...) ? (Or has this not been tested -- in which case I can try)

[mischnic]

does the hmr runtime added to the Audio Worklet script cause to script to fail

I don't recall the exact error.

is the hmr code functional in the AudioWorklet context

HMR won't work because you can register a AudioWorkletProcessor only once:

If the name exists as a key in the node name to processor definition map, throw a NotSupportedError exception and abort these steps because registering a definition with a duplicated key is not allowed. (https://webaudio.github.io/web-audio-api/#dom-audioworkletglobalscope-registerprocessor)

[habemus-papadum]

@mischnic Thanks! all makes sense

[quasicomputational]

This'd be solved by #2306. If you want to try a hackish workaround today, you might try my parcel-plugin-import-as-url.

[mischnic]

This'd be solved by 2306

That's not needed for this, normal WebWorkers work fine with Parcel.

[H-s-O]

Any news on this ?

[mischnic]

Now, there are some more worklet types with CSS Houdini