我正在尝试更改另一个模块的 AudioWorkletProcessor 使用的值,但从 AudioWorkletProcessor 的上下文来看,该值不会改变,只是保持不变。但是从修改数据的模块来看,当查询到数据时,实际上那里已经发生了变化。就像有一个完全独立的模块实例/状态,它保存修饰符 (main.js) 和读取器 (audio-processor.js) 的数据 (functions.js)
这里我们有 audio-processor.js
import { sawWave } from "/src/functions.js";
var tick = 0
class AudioProcessor extends AudioWorkletProcessor {
process(inputs, outputs, parameters) {
const output = outputs[0]
output.forEach(channel => {
// emphasis on sawWave function
var value = sawWave(tick) * 0.1;
for (let i = 0; i < channel.length; i++) {
channel[i] = value
}
});
tick++
return true
}
}
registerProcessor('audio-processor', AudioProcessor)
这里我们有 functions.js
,它包含导入到 audio-processor.js
let variables = {
// emphasis on this variable
sawWaveFrequency: 1
}
export function setSawFrequency(freq) {
variables.sawWaveFrequency = freq
}
export function sawWave(tick) {
console.log(variables.sawWaveFrequency)
// this function uses the variable defined above and is imported by audio-processor.js
// variables.sawWaveFrequency doesn't change for audio-processor.js when modified from main.js
// so the output will will always be as if variables.sawWaveFrequency = 1
return tick * variables.sawWaveFrequency % 10;
}
这里我们有 main.js
,它处理来自 HTML 页面的输入
import { setSawFrequency } from "/src/functions.js";
var audioContext
var whiteNoiseNode
async function init() {
audioContext = new AudioContext()
await audioContext.audioWorklet.addModule("/src/audio-processor.js")
whiteNoiseNode = new AudioWorkletNode(audioContext, 'audio-processor')
}
function play() {
whiteNoiseNode.connect(audioContext.destination)
}
function main() {
document.querySelector("#play").onclick = play;
document.querySelector("#init").onclick = init;
document.querySelector("#slider-mult").oninput = function() {
// this is supposed to change the value, but only does so in the context of main.js and not audio-processor.js
setSawFrequency(this.value);
}
}
main();
编辑:我认为你只应该使用 AudioWorkletProcessor.port
和进程函数中的 parameters
参数来与之通信?
最佳答案
您已经在正确的轨道上。要更改 AudioWorkletProcessor
中的值,您可以使用自定义 AudioParam
或通过 MessagePort
发送消息。
您的代码不起作用的原因是,从技术上讲,您最终得到了同一模块的两个实例。 AudioWorkletProcessor 在不同的线程上运行,无法访问在主线程上加载的模块。因此 /src/functions.js
被加载了两次。一个实例在主线程上,另一个在音频线程上。他们每个人都不知道对方的存在。
关于javascript - 如何将模块导入到在别处更改的 AudioWorkletProcessor 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61070615/