Question

所以我想要的是让来自不同音频源的恒定循环互换。出于演示目的，我制作了一个小益智游戏-您按从0到8的顺序排列数字，并根据对齐方式的不同而不同。我设法在Chrome浏览器上获得了想要的结果，但在Safari或Firefox上却没有。我尝试添加其他音频目标或多个音频上下文，但是无论在Safari和其他浏览器（Chrome浏览器除外）中进行一次迭代后，什么循环都停止了。

以下是代码笔Demo Puzzle with music上的演示链接。请降低您的声音，因为音乐可能太响了，我没有掌握。这是我用于Web Audio 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);

Answer 1

一些想法：

您并不是真的以这种方式使用Web Audio，而是仍在使用音频元素作为源，如果您希望能够实现精确的时序，则无济于事。您应该将它们加载到AudioBuffers中并使用AudioBufferSourceNode播放它们。
如果您绝对要使用音频元素（因为使用的文件确实很大，并且要流式传输它们），则可能要使用loop属性，尽管我怀疑这样做最终是否准确，并且畅通无阻。
从不使用setInterval获取每个帧的回调，请使用requestAnimationFrame
不要使用setInterval或requestAnimationFrame来实现精确的音频循环，而javascript线程不够精确，无法做到这一点，并且在其他事情花费更多时间，敌人太多时可以阻止它屏幕例如。您应该不时地进行调度：https://www.html5rocks.com/en/tutorials/audio/scheduling/
AudioBufferSourceNodes具有一个循环布尔属性，它将使它们尽可能精确地循环
要意识到不同的音频解码器（例如：不同的浏览器）可能对音频文件的解码稍有不同：例如，有些音频文件可能在开始时还有几毫秒的时间。当使用多个循环AudioBufferSourceNodes时，这可能会成为一个问题，这些音频缓冲区在x的时间后可能全部不同步。我总是在需要的确切时间重新安排时间，而不是使用loop属性。

Web Audio Api在不同浏览器中的精确循环

1 个答案: