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

Question

我正在使用Angular开发一个视频会议web应用程序。我正在尝试调用AudioWorkletProcessor类中的一些wasm函数。但是，我很难理解如何将wasm模块传递到AudioWorkletProcessor中，然后调用这些函数。我能够从emcc生成的js文件中实例化wasm模块(使用命令：emcc test.cpp -s WASM=1 -s MODULARIZE=1)，然后在构造AudioWorkletNode时尝试通过options.processorOptions参数传递此模块；然而，函数对象似乎无法传递，因为它提供了一个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

向worker (或AudioWorklet)传递实例化的WASM模块是不可能的。它仅在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/