Javascript 从Blob热加载带有Wasm模块的Web音频工作集处理器时是否出现异常? 我试图用EcliScript来加载带有C++代码的WASM模块导入的动态Web音频小工具。p>
我想在内存中操作工作集代码,使用Blob创建对象,将它们作为模块注入音频工作集,并对它们进行热交换 我遵循web audio samples解决方案中建议的设计模式来实现作为Wasm模块导入到工作集中的工作集。当处理器代码在文件中时,这似乎工作得很好 在没有外部Wasm模块导入的情况下,从内存热加载和交换工作集似乎也能很好地工作 这就是我为Blob创建代码的方式。为了说明这一点,我使用了simple-kernel.wasmmodule.js,它使用与web音频示例中的Wasm设计模式示例相同的Emscripten配置进行编译Javascript 从Blob热加载带有Wasm模块的Web音频工作集处理器时是否出现异常? 我试图用EcliScript来加载带有C++代码的WASM模块导入的动态Web音频小工具。p>,javascript,blob,web-audio-api,webassembly,wasm-bindgen,Javascript,Blob,Web Audio Api,Webassembly,Wasm Bindgen,我想在内存中操作工作集代码,使用Blob创建对象,将它们作为模块注入音频工作集,并对它们进行热交换 我遵循web audio samples解决方案中建议的设计模式来实现作为Wasm模块导入到工作集中的工作集。当处理器代码在文件中时,这似乎工作得很好 在没有外部Wasm模块导入的情况下,从内存热加载和交换工作集似乎也能很好地工作 这就是我为Blob创建代码的方式。为了说明这一点,我使用了simple-kernel.wasmmodule.js,它使用与web音频示例中的Wasm设计模式示例相同的E
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构造函数和process方法中对模块导入和模块代码进行注释,则可以正常工作
但是,使用Wasm导入热加载工作集似乎不起作用。。。当我尝试这样做时,我得到“加载worklet:DomeException时出错”,并且没有其他线索
我怀疑这可能有点幼稚,可能需要更复杂的技术,比如动态导入
我创建了一个web音频示例分支解决方案,其中添加了一个小示例项目(wasm热加载),该项目为说明问题创造了条件
可从以下网址获得:
有谁能帮助我们弄清楚问题可能是什么,这是否可行
谢谢
FØ问题在于您的工作集处理器的来源是不透明的。 这意味着无法从此脚本内部解析相对导入 为了避免这种情况,您需要使用绝对URI 因此,您必须重写代码,以便将正确的baseURI添加到imports语句中。由于此代码是从您的js主页面调用的,因此您可以使用正确的格式构建此blob内容,例如使用及其第二个参数基
constblobcode=()=>{
返回`
“从导入模块”${
//将相对URL转换为绝对URL
新URL('./simple kernel.wasmmodule.js',location.href)
}";
从导入{RENDER_QUANTUM_FRAMES,MAX_CHANNEL_COUNT,heapudiobuffer}”${
新URL('../lib/wasm audio helper.js',location.href)
}";
类WASMWorkletProcessor扩展了AudioWorkletProcessor{
构造函数(){
超级();
[...]
`
};
console.log(blobCode());
问题在于您的工作集处理器的来源是不透明的。
这意味着无法从此脚本内部解析相对导入
为了避免这种情况,您需要使用绝对URI
因此,您必须重写代码,以便将正确的baseURI添加到imports语句中。由于此代码是从您的js主页面调用的,因此您可以使用正确的格式构建此blob内容,例如使用及其第二个参数base
constblobcode=()=>{
返回`
“从导入模块”${
//将相对URL转换为绝对URL
新URL('./simple kernel.wasmmodule.js',location.href)
}";
从导入{RENDER_QUANTUM_FRAMES,MAX_CHANNEL_COUNT,heapudiobuffer}”${
新URL('../lib/wasm audio helper.js',location.href)
}";
类WASMWorkletProcessor扩展了AudioWorkletProcessor{
构造函数(){
超级();
[...]
`
};
console.log(blobCode());
我有一个类似的bug。只有当导入在工作集中时才会抛出Dom异常。
这个问题是由一个名为web audio inspector的chrome扩展造成的
此扩展肯定会在工作集周围添加一些包装函数,因为导入未被授权调用到函数中,所以工作集导入会中断。
无论如何,卸载了扩展并解决了问题。我有一个类似的错误。只有当导入在工作集中时,才会出现Dom异常。 这个问题是由一个名为web audio inspector的chrome扩展造成的 此扩展肯定会在工作集周围添加一些包装函数,因为导入未被授权调用到函数中,所以工作集导入会中断。 无论如何,卸载了扩展并解决了问题