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

Question

由于旧的 Webaudio 脚本处理器自 2014 年以来已被弃用，而 Audioworklets 在 Chrome64 中出现，我决定尝试一下。但是我在移植我的应用程序时遇到了困难。我将举一个很好的 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);

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

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

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

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

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

我一直在 VGMPlay_WebAudio class 的构造函数中添加一些代码，从示例到实际结果，但正如我所说，我不知道朝哪个方向发展现在搬家。

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。我在代码中看到了其他方法，但除了启动和停止节点之外，它们实际上并没有做太多事情。这可以通过主线程中的 connecting/disconnecting AudioWorkletNode 来完成。无需 cross-thread 消息传递。

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

问你几个问题：

游戏图形引擎如何向 VGM 生成器发送消息？
VGMPlay class 可以在工作线程上运行而不与主线程进行任何交互吗？除了启动和停止，我没有在代码中看到任何交互。
XMLHttpRequest 对 VGMPlay class 是必不可少的吗？或者可以在其他地方完成吗？

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

Porting scriptprocessor based application to audioworklet

javascript

web-audio-api

scriptprocessor