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 Audio调度程序（“start（t0）”）。有关详情，请参阅“两个时钟的故事”：https://www.html5rocks.com/en/tutorials/audio/scheduling/。

Answer 2

cwilso说的是对的。使用AudioContext.CurrentTime和+/-手动确定setTimeout的下一次，而不是使用该调度程序库。那一切都应该没问题。

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

2 个答案: