Javascript setTimeout works on desktop, not on android?

Question

I have a function that plays an different audio file at random every n seconds (based on input from a web page) when the user hits start. As you would expect, it stops when they hit stop.

It works fantastic on my desktop (using chrome), but I've tried it on two different android devices (note 4 and note 8) in chrome but it will only play the audio once before bailing.

Workflow: User clicks start, the function startstop is called. If it's the start button, play the audio and create a timeout with n seconds (plus 2 to allow each audio file to play through)

If it's the stop button, clear the timeout, pause any audio, and reset the button to start.

var audiofiles = ['audio/Are your fingers curved.mp3','audio/Curve fingers.mp3','audio/Curve them up.mp3','audio/Curve them.mp3','audio/Curve your fingers.mp3','audio/Curve.mp3']

var playSounds;
var audio;

function startstop()
{       
    var text = document.getElementById("StartStop").firstChild;
    if (text.innerHTML == 'Start')
    {
        if (!validateInputValue())
        {
            return;
        }
        playAudio();
        text.innerHTML = 'Stop';
    }
    else
    {   
        clearTimeout(playSounds);
        audio.pause();
        text.innerHTML = 'Start';
    }
}

function playAudio()
{
    var delta = document.getElementById("timeDelta").value;
    delta = parseInt(delta, 10) + 2; // add two since they're all about two seconds.  Easier than blocking when you play a file. 

    var fileToPlay = audiofiles[Math.round(Math.random() * (audiofiles.length - 1))];
    audio = new Audio(fileToPlay);
    audio.play();

    playSounds = setTimeout(playAudio, delta*1000);
}

function validateInputValue()
{
    document.getElementById("warning").innerHTML = "   ";

    //Get the value to evaluate
    delta = parseInt(document.getElementById("timeDelta").value, 10);

    if (delta < 0 || delta > 300)
    {
        document.getElementById("warning").innerHTML = "Please enter a number from 0 to 300";
        document.getElementById("timeDelta").value = 30;
        return false;
    }
    return true;
}

I feel like I'm taking crazy pills. The website is live, and can be found at susannavalleau.com/fingers. It's a silly web-app I'm making for my sister who's a piano teacher to remind her students to curve their fingers.

Answer 1

The issue is caused by most mobile browsers, which block videos and sounds from being played without user interaction (loading them may result in extra costs for the user, depending on their data contract) .

So you can't use new Audio() after a setTimeout . What you can do, however, after at least one user interaction, is replace the src of an audio element and make it play. The good news is: you do require at least one user interaction already.

1. First step, add an <audio> element in your HTML:

<audio id="sound"></audio>

2. When the page is done loading the HTML, save that element in the audio variable, by adding this at the end of your code:

window.addEventListener('DOMContentLoaded', function(){
    audio = document.getElementById('sound');
});

3. In your playAudio function, instead of using audio = new Audio() , do this:

audio.src = fileToPlay;