小编blo*_*510的帖子

我已经成功地在React中实例化了一个简单的AudioWorklet,并希望像谷歌的例子那样启动一个简单的振荡器.为了测试运行它,我正在渲染一个按钮,其onClick事件调用以下内容:

SRC/App.jsx:

userGesture(){
  //create a new AudioContext
  this.context = new AudioContext();

  //Add our Processor module to the AudioWorklet
  this.context.audioWorklet.addModule('worklet/processor.js').then(() => {

  //Create an oscillator and run it through the processor
  let oscillator = new OscillatorNode(this.context);
  let bypasser = new MyWorkletNode(this.context, 'my-worklet-processor');

  //Connect to the context's destination and start
  oscillator.connect(bypasser).connect(this.context.destination);
  oscillator.start();
  })
  .catch((e => console.log(e)))
}

问题是,每次单击时,addModule方法都会返回以下错误:

DOMException: The user aborted a request.

我在Ubuntu v16.0.4上运行Chrome v66.

SRC/worklet/worklet-的node.js:

 export default class MyWorkletNode extends window.AudioWorkletNode {
        constructor(context) {
          super(context, 'my-worklet-processor');
        }
      }

SRC/worklet/processor.js …

我有从服务器到客户端的音频数据流。它以 Node.js 缓冲区（Uint8Array）开始，然后通过 port.postMessage() 发送到 AudioWorkletProcessor，在其中转换为 Float32Array 并存储在 this.data 中。我花了几个小时尝试将输出设置为 Float32Array 中包含的音频数据。记录 Float32Array 预处理会显示准确的数据，但在处理期间记录它会显示在发布新消息时数据不会发生变化。这可能是我低级音频编程知识的一个空白。

当数据到达客户端时，将调用以下函数：

  process = (data) => {
        this.node.port.postMessage(data)
  }

顺便说一句，（你可以让我知道）也许我应该使用参数描述符而不是 postMessage ？无论如何，这是我的 AudioWorkletProcessor：

class BypassProcessor extends AudioWorkletProcessor {

  constructor() {
    super();
    this.isPlaying = true;
    this.port.onmessage = this.onmessage.bind(this)
  }

  static get parameterDescriptors() {
    return [{ // Maybe we should use parameters. This is not utilized at present.
      name: 'stream',
      defaultValue: 0.707
    }];
  }

  convertBlock = (incomingData) => { // incoming data is a UInt8Array
    let i, l = …

我正在尝试在 React 中创建一个 AudioWorklet。我正在使用 create-react-app 并将在 React 上下文之外工作的脚本导入到 App.jsx 中。它无法实例化我的 AudioWorkletNode 扩展并引发以下错误：

   Failed to compile.
./src/worklet/worklet-node.js
  Line 2:  'AudioWorkletNode' is not defined  no-undef

代码：

 // The code in the main global scope.
    class MyWorkletNode extends AudioWorkletNode {
        constructor(context) {
          super(context, 'my-worklet-processor');
        }
      }

      let context = new AudioContext();

      context.audioWorklet.addModule('processor.js').then(() => {
        let node = new MyWorkletNode(context);
      });

同样的代码成功初始化了 AudioWorklet，所以我有点困惑为什么 AudioWorkletNode 没有被识别。