javascript - 将基于脚本处理器的应用程序移植到 audioworklet

Question

由于旧的 Webaudio 脚本处理器自 2014 年以来已被弃用，而 Audioworklets 出现在 Chrome 64 中，我决定尝试一下。但是我在移植我的应用程序时遇到了困难。我将从一个不错的 article 中给出 2 个示例表明我的观点。

首先是脚本处理器方式:

var node = context.createScriptProcessor(1024, 1, 1);
node.onaudioprocess = function (e) {
  var output = e.outputBuffer.getChannelData(0);
  for (var i = 0; i < output.length; i++) {
    output[i] = Math.random();
  }
};
node.connect(context.destination);

另一种填充缓冲区然后播放的方法:

var node = context.createBufferSource(), buffer = 
context.createBuffer(1, 4096, context.sampleRate), data = buffer.getChannelData(0);

for (var i = 0; i < 4096; i++) {
  data[i] = Math.random();
}

node.buffer = buffer;
node.loop = true;
node.connect(context.destination);
node.start(0);

两者最大的区别是第一个在播放时用新数据填充缓冲区，而第二个则预先生成所有数据。

由于我生成了很多数据，所以我无法事先完成。有很多 examples对于 Audioworklet，但它们都使用其他节点，在这些节点上只需运行 .start()，连接它，它就会开始生成音频。当我没有这样的方法时，我无法想出一种方法来做到这一点。

所以我的问题基本上是如何在 Audioworklet 中执行上述示例，当数据在某个数组的主线程中连续生成并且该数据的播放发生在 Webaudio 线程中时。

我一直在阅读有关消息端口的内容，但我也不确定这是否可行。这些例子并没有指出我要说的那个方向。我可能需要的是使用我自己的数据在 AudioWorkletProcesser 派生类中提供处理函数的正确方法。

我当前基于脚本处理器的代码位于 github ，特别是在 vgmplay-js-glue.js 中。

我一直在向 VGMPlay_WebAudio 类的构造函数添加一些代码，从示例到实际结果，但正如我所说，我不知道现在该往哪个方向移动。

constructor() {
            super();

            this.audioWorkletSupport = false;

            window.AudioContext = window.AudioContext||window.webkitAudioContext;
            this.context = new AudioContext();
            this.destination = this.destination || this.context.destination;
            this.sampleRate = this.context.sampleRate;

            if (this.context.audioWorklet && typeof this.context.audioWorklet.addModule === 'function') {
                    this.audioWorkletSupport = true;
                    console.log("Audioworklet support detected, don't use the old scriptprocessor...");
                    this.context.audioWorklet.addModule('bypass-processor.js').then(() => {
                            this.oscillator = new OscillatorNode(this.context);
                            this.bypasser = new AudioWorkletNode(this.context, 'bypass-processor');
                            this.oscillator.connect(this.bypasser).connect(this.context.destination);
                            this.oscillator.start();
                    });
            } else {
                    this.node = this.context.createScriptProcessor(16384, 2, 2);
            }
    }

Answer 1

So my question basically is how to do the above example in Audioworklet,

对于您的第一个示例，已经有一个 AudioWorklet 版本: https://github.com/GoogleChromeLabs/web-audio-samples/blob/gh-pages/audio-worklet/basic/js/noise-generator.js

我不推荐第二个示例(又名缓冲区拼接)，因为它会创建大量源节点和缓冲区，从而可能导致 GC，从而干扰主线程中的其他任务。如果预定的开始时间没有落在样本上，则两个连续缓冲区的边界也可能发生不连续性。话虽如此，您将无法在此特定示例中听到故障，因为源 Material 是噪音。

when the data is generated continuously in the main thread in some array and the playback of that data is happening in the Webaudio thread.

您应该做的第一件事是将音频生成器与主线程分开。音频生成器必须在 AudioWorkletGlobalScope 上运行。这就是 AudioWorklet 系统的全部目的 - 更低的延迟和更好的音频渲染性能。

在your code ,VGMPlay_WebAudio.generateBuffer() 应在 AudioWorkletProcessor.process() 回调中调用，以填充处理器的输出缓冲区。这与您的 onaudioprocess 回调所做的大致匹配。

I've been reading about the messageport thing, but I'm not sure that's the way to go either. The examples don't point me into that direction I'd say. What I might need is the proper way to provide the process function in the AudioWorkletProcesser derived class with my own data.

我认为您的用例不需要 MessagePort。我在代码中看到了其他方法，但除了启动和停止节点之外，它们实际上并没有做太多事情。这可以通过在主线程中连接/断开 AudioWorkletNode 来完成。无需跨线程消息传递。

最后的代码示例可以是 AudioWorklet 的设置。我很清楚，设置和实际音频生成之间的分离可能很棘手，但这是值得的。

几个问题:

1. 游戏图形引擎如何向 VGM 生成器发送消息？
2. VGMPlay 类能否在不与主线程交互的情况下存在于辅助线程中？除了启动和停止，我没有在代码中看到任何交互。
3. XMLHttpRequest 对 VGMPlay 类来说是必不可少的吗？或者可以在其他地方完成吗？