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的下一次時間。 然后，一切都會好起來的。