Javascript 如何将模块导入其他地方更改的AudioWorkletProcessor？

我试图从另一个模块更改AudioWorkletProcessor使用的值，但从AudioWorkletProcessor的上下文来看，该值不会更改，只是保持不变。但是从修改数据的模块，当查询数据时，实际上已经在那里更改了。这就像模块有一个完全独立的实例/状态，它保存修改器（main.js）和读取器（audioprocessor.js）的数据（functions.js）

这里有

音频处理器.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)

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

和

参数与之通信？
您已经走上了正确的轨道。要更改
AudioWorkletProcessor
中的值，您可以使用自定义
AudioParam
或通过
消息端口发送消息

代码不起作用的原因是，从技术上讲，您最终会得到同一模块的两个实例。AudioWorkletProcessor在不同的线程上运行，无法访问主线程上加载的模块。因此，
/src/functions.js
会被加载两次。一个实例位于主线程上，另一个实例位于音频线程上。他们每个人都不知道另一个存在。
你已经走上了正确的道路。要更改
AudioWorkletProcessor
中的值，您可以使用自定义
AudioParam
或通过
消息端口发送消息

代码不起作用的原因是，从技术上讲，您最终会得到同一模块的两个实例。AudioWorkletProcessor在不同的线程上运行，无法访问主线程上加载的模块。因此，
/src/functions.js
会被加载两次。一个实例位于主线程上，另一个实例位于音频线程上。它们中的每一个都不知道另一个存在。
您也可以使用
SharedArrayBuffer

在一个模块中创建共享内存对象

  const length = 100;
  const size = Int32Array.BYTES_PER_ELEMENT * length;
  this.sab = new SharedArrayBuffer(size);
  this.sharedArray = new Int32Array(this.sab);

将其发送到
AudioWorkletProcessor

  this.worker.port.postMessage({
      sab: this.sab
  });

在
AudioWorkletProcessor中

this.port.onmessage = event => {
      this.sharedArray = new Int32Array(event.data.sab);
}

现在两个模块共享同一个数组（
this.sharedArray
）。
您也可以使用
sharedArray缓冲区

在一个模块中创建共享内存对象

  const length = 100;
  const size = Int32Array.BYTES_PER_ELEMENT * length;
  this.sab = new SharedArrayBuffer(size);
  this.sharedArray = new Int32Array(this.sab);

将其发送到
AudioWorkletProcessor

  this.worker.port.postMessage({
      sab: this.sab
  });

在
AudioWorkletProcessor中

this.port.onmessage = event => {
      this.sharedArray = new Int32Array(event.data.sab);
}

现在两个模块共享同一个数组（
this.sharedArray
）