javascript - 如何让 AudioWorklets 与 vue-cli/webpack/babel 一起工作？ (获取非法调用错误)

Question

我正在尝试使用 vue-cli 创建一个使用 AudioWorklet 的 Web 应用程序，但是在尝试访问我的 AudioWorkletNode 的任何属性(如端口或 channel 计数等)时我遇到了一堆错误:

TypeError: Illegal invocation at MyWorkletNode.invokeGetter

经过几个小时的谷歌搜索和调试，我认为它与类有某种关系，AudioWorklet 似乎只适用于 ES6 类，但 vue-cli/babel/webpack 之一确实很神奇(我不明白它在哪里和做什么) 并将类转译为常规构造函数或其他东西。或者也许是 worklet-loader 进行了转译？我不知道，我完全一头雾水，不知道该往哪里看。

如果我在没有任何 bundler 的情况下编写代码，只有 vanilla JS，它就可以工作，我不会收到任何错误。但是我需要在我的 vue 项目中使用 AudioWorklets，那么我有什么选择呢？有什么比禁用类转译更好的吗？如果没有，我可以在哪里以及如何禁用它？

// main.js
import worklet from 'worklet-loader!./processor.js'

class MyWorkletNode extends AudioWorkletNode {
  constructor(context) {
    super(context, 'my-worklet-processor');
    // Throws TypeError: Illegal invocation
    console.log(this.channelCount);
  }
}

this.audioCtx.audioWorklet.addModule(worklet).then(() => {
  let node = new MyWorkletNode(this.audioCtx);
  console.log("Loaded!");

  // Throws 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);

Answer 1

如果没有更多代码，很难说出这里出了什么问题。工作集部分看起来不错。

但要回答一般性问题(为了后代)，处理器必须在一个单独的包中加载到它自己的上下文中。当您使用 worklet-loader 时，导入实际上只是一个 url。

import MyWorkletProceessor from 'worklet-loader!./path/MyWorkletProcessor'

console.log(MyWorkletProcessor) 

>5b91ba45c32d94f52b3a.worklet.js

我不建议使用内联加载器，因为它默认将工件放在 dist 根目录下，这可能会导致部署问题。

这是基本设置的演练。

// vue-config.js
configureWebpack: {
  module: {
    rules: [
      {
        test: /Worklet\.js$/,  <---- change this to match your filename conventions
        loader: 'worklet-loader',
        options: {
          name: 'js/[hash].worklet.js'
        }
      }
    ]
  }
}

// somewhere in vue code
import MyWorkletProcessor from './path/MyWorkletProcessor'
import MyWorkletNode from './path/MyWorkletNode'
...

try {
  await context.audioWorklet.addModule(MyWorkletProcessor)
  myWorkletNode = new MyWorkletNode(context)
  // or if no custom node
  // myWorkletNode = new AudioWorkletNode(context, 'my-worklet-processor') 
} catch (error) {
  // ...
}
// connect the workletNode input to a source node
someSourceNode.connect(myWorkletNode )
// connect the worklet output to some other node or destination
myWorkletNode.connect(context.destination)

// MyWorkletNode.js
export default class MyWorkletNode extends AudioWorkletNode {
   constructor(context) {
    super(context, 'my-worklet-processor')
    console.log(this.channelCount)
  }
}

// MyWorkletProcessor.js
class MyWorkletProcessor extends AudioWorkletProcessor {
  constructor() {
    super()
    this.port.postMessage('hello!')
  }

  process(inputs, outputs, parameters) {
    // audio processing code here.
    return true
  }
}
registerProcessor('my-worklet-processor', MyWorkletProcessor)

我也做了一个相关的demo app显示在 vue 中运行的工作集。