I'm experiencing some challenges while attempting to develop a WebApp using vue-cli with AudioWorklets. Whenever I try to access properties of my AudioWorkletNode, such as port or channelCount, I encounter multiple errors:
TypeError: Illegal invocation at MyWorkletNode.invokeGetter
Despite extensive research and debugging, it seems that the issue is somehow linked to classes. AudioWorklet appears to only function properly with ES6 classes, but vue-cli/babel/webpack performs some mysterious magic (which I am not familiar with) and transpiles the classes into regular constructor functions or something similar. Or could it be worklet-loader that handles the transpilation? I am completely lost and unsure where to focus my efforts.
If I code without any bundlers, just pure vanilla JS, it works flawlessly without any errors. However, incorporating AudioWorklets in my vue project poses a challenge. Are there alternative solutions apart from disabling class transpilation? If not, how can I disable it effectively?
// main.js
import worklet from 'worklet-loader!./processor.js'
class MyWorkletNode extends AudioWorkletNode {
constructor(context) {
super(context, 'my-worklet-processor');
// Triggers TypeError: Illegal invocation
console.log(this.channelCount);
}
}
this.audioCtx.audioWorklet.addModule(worklet).then(() => {
let node = new MyWorkletNode(this.audioCtx);
console.log("Loaded!");
// Triggers TypeError: Illegal invocation
node.port.onmessage = event => {
console.log(event.data);
};
}).catch(e => console.log(`${e.name}: ${e.message}`));
// processor.js
class MyWorkletProcessor extends AudioWorkletProcessor {
constructor() {
super();
this.port.postMessage('hello!');
}
process(inputs, outputs, parameters) {
// audio processing code here.
}
}
registerProcessor('my-worklet-processor', MyWorkletProcessor);