Web Audio Api在不同浏览器中的精确循环 [英] Web Audio Api precise looping in different browsers
问题描述
所以我想要的是让来自不同音频源的恒定循环互换.出于演示目的，我制作了一个小益智游戏-您按0到8的顺序排列数字，并根据对齐方式的不同而不同.我设法在Chrome浏览器上获得了想要的结果，但在Safari或Firefox上却没有.我尝试添加一个不同的音频目标或多个音频上下文，但是无论在Safari和其他浏览器(Chrome浏览器除外)中进行一次迭代后，什么循环都停止了.
So what I want is to have constant looping interchanging from different audio sources. For demo purpose I made a little puzzle game - you align numbers in order from 0 to 8 and depending on how you align them different loops are playing. I managed to get the result I want on Chrome Browser, but not on Safari or Firefox. I tried adding a different audio destination or multiple audio contexts but no matter what loop just stops after one iteration in Safari and other browsers except for Chrome.
此处是代码笔上的演示的链接带有音乐的演示拼图请降低您的声音，因为音乐可能太响了，我没有掌握.这是我用于Web Audio Api操作的基本代码.谢谢*此外，它根本不适用于移动设备.
Here is a link to the demo on code-pen Demo Puzzle with music please turn down your sound as music might be a little too loud, I didn't master it. And here is basic code I have for Web Audio Api manipulation. Thanks *Also it does not work for mobile at all.
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);
推荐答案
一些想法:
-
您并不是真的以这种方式使用Web Audio，而是仍在使用音频元素作为源，如果您希望能够实现精确的计时，则无济于事.您应该将它们加载到AudioBuffers中并使用AudioBufferSourceNode播放它们.
You're not really using Web Audio this way, you're still using audio elements as the source which doesn't help if you want to be able to achieve precise timing. You should load them into AudioBuffers and play them using an AudioBufferSourceNode.
如果您绝对要使用音频元素(因为使用的文件确实很大，并且要流式传输它们)，则可能要使用loop属性，尽管我怀疑这样做最终是否准确，并且畅通无阻.
If you absolutely want to use audio elements (because the files you use are really massive and you want to stream them) you probably want to use the loop property on it although i doubt if that ends up being precise and gapless.
永远不要使用setInterval获取每个帧的回调，请使用requestAnimationFrame
Never use setInterval to get a callback every frame, use requestAnimationFrame
不要使用setInterval或requestAnimationFrame来实现精确的音频循环，而javascript线程不够精确，无法做到这一点，并且当其他事情花费更多时间，敌人太多时，可以阻止它屏幕例如.您应该不时地进行调度: https://www.html5rocks.com/en/tutorials/audio/scheduling/
Don't use setInterval OR requestAnimationFrame to be able to achieve precise audio looping, the javascript thread is not precise enough to do that AND can be held up when other things take a bit more time, too many enemies in screen for example. You should be scheduling ahead of time now and then: https://www.html5rocks.com/en/tutorials/audio/scheduling/
AudioBufferSourceNodes具有一个循环布尔属性，它将使它们尽可能精确地循环
AudioBufferSourceNodes have a loop boolean property which will loop them as precise as possible
要意识到不同的音频解码器(例如:不同的浏览器)可能对音频文件的解码稍有不同:例如，有些音频文件可能在开始时还有几毫秒的时间.当使用多个循环AudioBufferSourceNodes时，这可能会成为一个问题，这些音频缓冲区可能在x的时间后全部不同步.我总是在需要的确切时间重新安排时间，而不是使用loop属性.
Do realise that different audio-decoders (so: different browsers) MIGHT decode audiofiles slightly differently: some may have a few more ms on the start for example. This might become an issue when using multiple looping AudioBufferSourceNodes, which may all be running out of sync after an x amount of time. I always reschedule something on the exact time needed instead of using the loop property.
这篇关于Web Audio Api在不同浏览器中的精确循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
