使用 Blob 中的 Wasm 模块热加载 Web 音频 worklet 处理器时出现 DOMException？

Question

我正在尝试通过使用 Emscripten 从 C++ 代码转译的 Wasm 模块导入来加载动态 Web 音频 worklet。

我想在内存中操作工作集代码，使用 Blob 创建对象，将它们作为模块注入音频工作集，然后热交换它们。

我遵循了 web-audio-samples 解决方案中建议的设计模式来实现作为 Wasm 模块导入到工作集中的工作集。当处理器代码在文件中时，这似乎很有效。

在没有外部 Wasm 模块导入的情况下从内存热加载和交换工作集似乎也能正常工作。

这就是我为 Blob 创建代码的方式。为了说明，我使用的是简单的-kernel.wasmmodule.js，它是使用与 web-audio-samples.

中的 Wasm 设计模式示例相同的 Emscripten 配置编译的

    const blobCode = () => {

      return `
      import Module from './simple-kernel.wasmmodule.js';
      import { RENDER_QUANTUM_FRAMES, MAX_CHANNEL_COUNT, HeapAudioBuffer } from '../lib/wasm-audio-helper.js';

      class WASMWorkletProcessor extends AudioWorkletProcessor {

        constructor() {
          super();

          // Allocate the buffer for the heap access. Start with stereo, but it can
          // be expanded up to 32 channels.
          this._heapInputBuffer = new HeapAudioBuffer(Module, RENDER_QUANTUM_FRAMES,
                                                      2, MAX_CHANNEL_COUNT);
          this._heapOutputBuffer = new HeapAudioBuffer(Module, RENDER_QUANTUM_FRAMES,
                                                      2, MAX_CHANNEL_COUNT);
          this._kernel = new Module.SimpleKernel();
        }

        process(inputs, outputs, parameters) {
        .
        .
        .
           return true;
        }
      }
      registerProcessor('wasm-worklet-processor', WASMWorkletProcessor);`;
}

这就是我使用 Blob 代码创建对象并将其加载到工作集中的方式。

const workletHotLoading = async (context) => {

  const blob = new Blob([ blobCode() ], { type: "application/javascript; charset=utf-8" });

  const workletUrl = window.URL.createObjectURL(blob);

  await context.audioWorklet.addModule(workletUrl);

  const oscillator = new OscillatorNode(context);

  const wasmBlobWorkletNode = new AudioWorkletNode(context, 'wasm-worklet-processor');

  wasmBlobWorkletNode.onprocessorerror = (event) => {
    console.log(`An error from WASMWorkletProcessor.constructor() was detected.`);
  };

  oscillator.connect(wasmBlobWorkletNode).connect(context.destination);

  oscillator.start();
};

我希望它能像没有 Wasm 导入的处理器一样工作，或者当我从文件加载它们时。如果在工作集构造函数和处理方法中注释模块导入和模块代码，它就可以工作。

但是，使用 Wasm 导入热加载工作集似乎不起作用...当我尝试这样做时，我得到 "Error on loading worklet: DOMException" 并且没有其他线索。

我怀疑这可能有点天真，可能需要更复杂的方法，例如动态导入...

我创建了一个 web-audio-samples 解决方案的分支，我在其中添加了一个小示例项目 (wasm-hot-loading)，它创造了说明问题的条件。

可在此处获得：https://github.com/mimic-sussex/web-audio-samples/tree/master/audio-worklet/design-pattern/wasm-hot-loading

任何人都可以帮助阐明问题可能是什么以及这是否可行？

谢谢

FØ

Answer 1

问题是您的 Worklet 处理器的来源不透明。这意味着无法从该脚本内部解析您的相对导入。

要避免这种情况，您需要使用绝对 URI。

因此您必须重写代码才能将正确的 baseURI 添加到导入语句中。由于此代码是从您的主要 js 页面调用的，因此您可以使用正确的格式构建此 blob 内容，例如使用 URL constructor 及其第二个参数 base.

const blobCode = () => {
    return `
import Module from "${
  // convert relative to absolute URL
  new URL('./simple-kernel.wasmmodule.js', location.href)
}";
import { RENDER_QUANTUM_FRAMES, MAX_CHANNEL_COUNT, HeapAudioBuffer } from "${
  new URL('../lib/wasm-audio-helper.js', location.href)
}";

class WASMWorkletProcessor extends AudioWorkletProcessor {

  constructor() {
    super();
[...]
 `
 };

console.log(blobCode());

Answer 2

我有一个类似的错误。 Dom 仅当导入在工作集中时才会抛出异常。问题是由于名为网络音频检查器的 chrome 扩展造成的此扩展肯定会在 worklet 周围添加一些包装函数，因为导入未被授权调用到函数中，因此 worklet 导入中断。无论如何，卸载扩展程序并解决问题。

使用 Blob 中的 Wasm 模块热加载 Web 音频 worklet 处理器时出现 DOMException？

DOMException when hot-loading Web Audio worklet processor with Wasm modules from a Blob?

javascript

blob

webassembly

web-audio-api

wasm-bindgen