I'm trying to loop two file using javascript. Here's the sequence:

1. User clicks a button
2. A countdown timer starts and File 1 plays (onclick)
3. Then File 2 plays after X ms (setTimeout)
4. File 1 plays again (setInterval)
5. File 2 plays again ... etc until the timer ends.

It works fine on desktop. But I can't get the sounds to loop on mobile. In other words, it gets stuck at step 3.

Here's the URL: https://benpages.com/nova/

And here's how the how I've set up the audio:

function audioTrack() {
    const soundOne = new Audio('./files/low-bell.mp3');
    const soundTwo = new Audio('./files/high-bell.mp3');

    inhale = document.getElementById('inhale').value * 1000;
    exhale = document.getElementById('exhale').value * 1000;
    breathCycle = inhale + exhale;

    soundOne.play();
    soundOffset = setTimeout(() => {soundTwo.play()}, inhale);
}
function loopTrack() {
    audioTrack();
    audioLoop = setInterval(audioTrack, breathCycle);
}

loopTrack is triggered onclick along with other functions.

const startTimer = function () {

    time = startingMinutes * 60;

    if(activeSession == true){
        clearInterval(countdown);
        clearInterval(audioLoop);
        clearTimeout(soundOffset);
    }

    if(startingMinutes != "") {
        activeSession = true;
        updateCountdown();
        loopTrack();
        countdown = setInterval(updateCountdown, 1000);
    } else {
        alert('Enter a time and try again');
    }
}

Any idea what's going on?