Javascript Web音频Api在不同浏览器中精确循环

所以我想要的是从不同的音频源进行不断的循环交换。为了演示的目的，我做了一个小益智游戏-你按照0到8的顺序排列数字，并根据你排列它们的方式来排列不同的循环。我在Chrome浏览器上获得了我想要的结果，但在Safari或Firefox上没有。我尝试添加一个不同的音频目的地或多个音频上下文，但无论在Safari和除Chrome之外的其他浏览器中，循环在一次迭代后停止

这里是一个链接到代码笔上的演示 请把声音关小一点，因为音乐可能有点太大声了，我没有掌握它。这是我用来处理网络音频Api的基本代码。 谢谢 *而且它根本不适用于移动设备

const AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
const audio1 = document.getElementById("aud1");
const audio2 = document.getElementById("aud2");
const audio3 = document.getElementById("aud3");
const audio4 = document.getElementById("aud4");
var chosenTrack = audio2;
let gameStarted = false;

function startGame() {
document.getElementById("sHold").style.display = "none";
document.getElementById("container").style.display = "block";

gameStarted = true;
audioContext.resume();
audioContext = new AudioContext();
audio1.pause();
audio1.play();
audio1.currentTime = 0;

}

setInterval(function() {

if (gameStarted) {
    //console.log(audioContext.currentTime );
    if (audioContext.currentTime >= 6.4) {
        audioContext = new AudioContext();
        chosenTrack.pause();
        chosenTrack.play();
        chosenTrack.currentTime = 0;
    }
}
}, 5);

一些想法：

• 你不是真的用这种方式使用网络音频，你仍然使用音频元素作为源，如果你想获得精确的时间，这是没有帮助的。您应该将它们加载到AudioBuffers中，并使用AudioBufferSourceNode播放它们

• 如果您绝对想要使用音频元素（因为您使用的文件非常庞大，并且您想要流式传输它们），您可能想要在其上使用loop属性，尽管我怀疑这最终是否精确无隙

• 不要使用setInterval来获取每帧的回调，请使用requestAnimationFrame

• 不要使用setInterval或requestAnimationFrame来实现精确的音频循环，javascript线程不够精确，当其他事情需要更多时间时，可能会中断，例如屏幕上有太多敌人。您应该随时提前安排：

• AudioBufferSourceNodes具有循环布尔属性，该属性将尽可能精确地循环它们

• 请务必意识到不同的音频解码器（因此：不同的浏览器）可能会对音频文件进行稍微不同的解码：例如，有些可能会在开始时有更多ms。当使用多个循环AudioBufferSourceNodes时，这可能会成为一个问题，这些循环AudioBufferSourceNodes可能会在x时间段后失去同步。我总是在需要的确切时间重新安排一些事情，而不是使用循环属性