1

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.

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);
Sanchez Panza
  • 381
  • 1
  • 11

1 Answers1

3

Some thoughts:

  • 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.

  • 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.

  • Never use setInterval to get a callback every frame, use requestAnimationFrame

  • 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 have a loop boolean property which will loop them as precise as possible

  • 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.

Eindbaas
  • 945
  • 1
  • 8
  • 16