在 AudioWorkletProcessor 中调用 wasm 模块函数的最佳方式？

Question

我正在使用 Angular 开发视频会议网络应用程序。我正在尝试在 AudioWorkletProcessor class 中调用一些 wasm 函数。但是，我对如何将 wasm 模块传递到 AudioWorkletProcessor 然后调用这些函数非常困惑。我能够从 emcc 生成的 js 文件中实例化 wasm 模块（使用命令：emcc test.cpp -s WASM=1 -s MODULARIZE=1），然后在构造 AudioWorkletNode 时尝试通过 options.processorOptions 参数传递该模块；但是，函数 objects 似乎无法传递，因为它给出了 DataCloneError。有没有更好的方法来实例化 wasm 模块并将其传递给工作集处理器，以便我可以使用它的功能？

audio.service.ts代码：

import { Injectable } from '@angular/core';
import { AudioContext, AudioWorkletNode } from 'standardized-audio-context';
import * as Module from '../../../assets/worklet/a.out.js'; // a.out.js is file generated by emcc
declare const WebAssembly: any;

@Injectable()
export class AudioService {
  audioCtx = new AudioContext();

  constructor() {}

  async createNewSetting(track) {
    const srcNode = this.audioCtx.createMediaStreamTrackSource(track);
    const destNode = this.audioCtx.createMediaStreamDestination();

    await this.audioCtx.resume();
    await this.audioCtx.audioWorklet.addModule(
      './assets/worklet/spatial-processor.js'
    );

    // Instantiate the wasm module and put in path to file
    const wasm = await Module({ locateFile: function(s) { return 'assets/worklet/' + s; }});
    
    // Will throw DataCloneError
    const spatialNode = new AudioWorkletNode(
      this.audioCtx,
      'spatial-processor',
      { processorOptions: {
        compiledModule: wasm
      }}
    );

    // Connect the nodes
    srcNode.connect(spatialNode);
    spatialNode.connect(destNode);

    // Return the updated audio stream
    return destNode.stream.getTracks()[0];

  }
}

Answer 1

无法将实例化的 WASM 模块传递给工作程序（或 AudioWorklet）。它仅在 WASM 模块已编译但尚未实例化时起作用。 MDN 上有一个示例，展示了如何使用普通工作人员执行此操作，但在使用 AudioWorkletProcessor.

的 processorOptions 时，它的工作方式相同

https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module#sending_a_compiled_module_to_a_worker

想法是在主线程上使用 compileStreaming()，在工作线程中使用 instantiate()。

另一方面，也可以将所有内容直接导入到 AudioWorklet 中，如本例所示。但是，我不建议这样做，因为在音频线程上编译代码可能会导致听得见的故障。

https://googlechromelabs.github.io/web-audio-samples/audio-worklet/design-pattern/wasm/

在 AudioWorkletProcessor 中调用 wasm 模块函数的最佳方式？

Best way to call wasm module functions in AudioWorkletProcessor?

webassembly

web-audio-api

angular

audio-worklet