我正在尝试使用 Emscripten 从 C++ 代码转译的 Wasm 模块导入加载动态 Web 音频工作集。
我想在内存中操作工作集代码,使用 Blob 创建对象,将它们作为模块注入音频工作集,并热交换它们。
我遵循了 web-audio-samples 解决方案中建议的设计模式来实现将作为 Wasm 模块导入工作集的工作集。当处理器代码在文件中时,这似乎工作得很好。
在没有外部 Wasm 模块导入的情况下从内存中热加载和交换工作集似乎也很有效。
这就是我为 Blob 创建代码的方式。为了说明,我使用了 simple-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 导入的处理器一样工作,或者当我从文件加载它们时。如果在 worklet 构造函数和处理方法中注释模块导入和模块代码,它可以工作。
但是,使用 Wasm 导入热加载工作集似乎不起作用......当我尝试这样做时,我得到“加载工作集时出错:DOMException”并且没有其他线索。
我怀疑这可能有点幼稚,并且可能需要更复杂的操作,例如动态导入......
我创建了一个 web-audio-samples 解决方案的分支,我在其中添加了一个小示例项目 ( wasm-hot-loading ),它创建了说明问题的条件。
任何人都可以帮助阐明问题可能是什么以及这是否可行?
谢谢
FØ