Web Audio API播放音频样本的性能问题

Question

我正在使用Ionic和Web Audio API创建一个复杂的节拍器应用程序。

在某些时候，节拍器可能每秒播放10多个“节拍”。

这实际上每秒调用此函数10次以上。

function playSound(e, name) {

    var buffer = audioBuffers[name];
    var source = audioContext.createBufferSource();
    var gain = audioContext.createGain();

    source.connect(gain);
    gain.connect(audioContext.destination);
    gain.gain.value = 1;
    source.buffer = buffer;
    source.connect(audioContext.destination);

    sched.nextTick(e.playbackTime, () => {
        source.start(0);
    });

}

用户可以选择多个样本，因此我首先要一次提取所有样本，并将缓冲区存储在数组中以提高性能，而不是每次都创建XMLHttpRequest（）。

问题是，当以这些较高的速率播放时，播放会变得奇怪，有时会不同步。 我正在使用https://github.com/mohayonao/web-audio-scheduler ，该工具很不错 ，所以我知道它不是时间问题。

如果我将样本播放换成基本振荡器：

function oscillator(e) {

    const t0 = e.playbackTime;
    const t1 = t0 + 0.4;
    const osc = audioContext.createOscillator();
    const amp = audioContext.createGain();

    osc.frequency.value = 1000;
    osc.start(t0);
    osc.stop(t1);
    osc.connect(amp);

    amp.gain.setValueAtTime(1, t0);
    amp.gain.exponentialRampToValueAtTime(1e-6, t1);
    amp.connect(masterGain);

    sched.nextTick(t1, () => {
        osc.disconnect();
        amp.disconnect();
    });
}

无论节奏如何，性能都很好。 我可以对示例播放进行任何改进以帮助提高性能吗？

Answer 1

您的第一个函数仅使用source.start（0）; 这让我觉得您是依靠setTimeout或setInterval来“安排”音频的。 第二个正确使用Web音频调度程序（“ start（t0）”）。 有关更多信息，请参见“两个时钟的故事”： https : //www.html5rocks.com/en/tutorials/audio/scheduling/ 。

Answer 2

cwilso说的是对的。 使用AudioContext.CurrentTime和+/-手动（而不是与该计划程序库一起）确定setTimeout的下一次时间。 然后，一切都会好起来的。