javascript - 使用 Audio Worklets 时如何修复 “cracking” 音频？

Question

我试图了解 AudioWorklet 正在工作并进行了一些测试。
到目前为止，当我让浏览器在后台播放声音并执行其他操作(例如，打开像 Photoshop 或 VSCode 这样的 CPU 密集型应用程序并移动窗口)时，我遇到了一个巨大的“破解”问题。
一开始我以为是硬件问题。我升级到 Catalina，删除了我找到的任何系统音频扩展，但在 Android 和其他一些 friend 的计算机(Mac、PC)上都是一样的。
我自己使用的是版本 1.0.1 Chromium: 78.0.3904.108 (Official Build) (64-bit)。
这个YouTube video演示破解音频问题。
我做了两个 CodePen 演示，你可以在这里测试:
Web Audio Cracks (Vanila + no Worklet) :

const ctx = new(window.AudioContext || window.webkitAudioContext)();
const request = new XMLHttpRequest();
const gainNode = ctx.createGain();
const sourceNode = ctx.createBufferSource();

request.open('GET', 'https://poppublic.s3.amazonaws.com/other/2.mp3', true);
request.responseType = 'arraybuffer';
request.onload = () => {
  ctx.decodeAudioData(request.response, buffer => {
    sourceNode.buffer = buffer;
    console.log(sourceNode.buffer.sampleRate);
  });
};
request.onerror = function(e) {
  console.log('HTTP error', e);
};
request.send();
play = () => {
  sourceNode.connect(gainNode);
  gainNode.connect(ctx.destination);
  sourceNode.start(0);
}
stop = () => {
  sourceNode.stop(0);
}

<button onClick="play()">Play</button>
<button onClick="stop()">Stop</button>

Web Audio Cracks (Vanila + Worklet) :

const ctx = new(window.AudioContext || window.webkitAudioContext)();
const request = new XMLHttpRequest();
let gainNode = null;
let sourceNode = null;
let buffer = null;
let worklet = null;

try {
  const script = 'https://poppublic.s3.amazonaws.com/other/worklet/processor.js';
  
  ctx.audioWorklet.addModule(script).then(() => {
    worklet = new AudioWorkletNode(ctx, 'popscord-processor')
    request.open('GET', 'https://poppublic.s3.amazonaws.com/other/2.mp3', true);
    request.responseType = 'arraybuffer';
    request.onload = () => {
      ctx.decodeAudioData(request.response, buff => {
        buffer = buff;
        console.log(buff.sampleRate);
      });
    };
    request.onerror = function(e) {
      console.log('HTTP error', e);
    };
    request.send();
  });
} catch (e) {
  this.setState({
    moduleLoaded: false
  });
  console.log('Failed to load module', e);
}
play = () => {
  stop();
  gainNode = ctx.createGain();
  sourceNode = ctx.createBufferSource();
  sourceNode.buffer = buffer;
  sourceNode.connect(gainNode);
  gainNode.connect(ctx.destination);
  sourceNode.start(0);
}
stop = () => {
  try {
    sourceNode.disconnect();
    gainNode.disconnect();
    sourceNode.stop(0);
  } catch (e) {
    console.log(e.message)
  }
}

<button onClick="play()">Play</button>
<button onClick="stop()">Stop</button>

您将听到的钢琴 MP3 是在录音室录制的 48000Hz/32bits/320kb 音频。
在提交任何错误之前，我需要确保我的代码是正确的。也许我没有以应有的方式链接事物。

Answer 1

使用worklet时，音频线程的默认优先级是normal。正如您通过运行 webaudio 然后移动窗口所看到的那样，这对音频不利。

您可以做的是转到 chrome://flags，搜索 worklet 并启用名为“为 Audio Worklet 使用实时优先级线程”的标志。这应该对 mac 和 windows 有所帮助。我不知道它是否会在Android上有所作为。

如果您在没有工作集的情况下听到 WebAudio 的裂缝，就像您在第一个 codepen 示例中所做的那样，那么这是出乎意料的，您真的应该 file an issue on that .