Playing an audio/sound with Javascript when time expires is not working on Android and IOS

Question

I have a custom made countdowntimer in javascript that shows mini seconds, seconds & minutes. You can see the full code below, now in my javascript code I can assign values to these variables in double digits like this :

var minutes = 05;
var seconds = 00;
var tens    = 00;

So after assigning above values, we can see it is 5 mins. In browser it will show up like this 05:00:00. In my html, I have three buttons start, stop and reset. When I press start the timer will start running out.

Now in my javascript I created the variable var sound and assigned my audio file to it. Now there is a function countDownTimer { } at end of my javascript code that is doing all work for timer, In that function the first if statement is how I know that the timer is expired. In this if statement I simply play the sound like this sound.play();

PROBLEM :

Now all of this works fine on Desktop but on mobile devices like Android and iOS, I hear no sound when the timer is expired.

Any ideas on how to play the sound when timer is expired on Android and iOS will be very much appreciated. Thank you!

My full HTML and Javascript for timer is below.

HTML

<div class="countDown">
    <p class="audtitle">Count Down</p>
    <div class="countdownwrapper">
        <p><span id="minutes">00</span><span class="separator">:</span><span id="seconds">00</span><span class="separator">:</span><span id="tens">00</span></p>
        <button id="button-start">Start</button>
        <button id="button-stop">Stop</button>
        <button id="button-reset">Reset</button>
    </div>
</div>

Javascript

        window.onload = function () {
            var minutes = 00;
            var seconds = 05; 
            var tens = 00;

            var sound = new Audio('anysoundlink.mp3');

            var mins = minutes;
            var secs = seconds;
            var mili = tens;

            var appendMinutes = document.getElementById("minutes")
            var appendTens = document.getElementById("tens")
            var appendSeconds = document.getElementById("seconds")
            var buttonStart = document.getElementById('button-start');
            var buttonStop = document.getElementById('button-stop');
            var buttonReset = document.getElementById('button-reset');

            appendMinutes.innerHTML = (minutes < 10) ? "0" + minutes : minutes;
            appendTens.innerHTML = (tens < 10) ? "0" + tens : tens;
            appendSeconds.innerHTML = (seconds < 10) ? "0" + seconds : seconds;

            var Interval;

            buttonStart.addEventListener("click", function(){
                clearInterval(Interval);
                if(minutes != 0 || seconds != 0 || tens != 0) {
                    Interval = setInterval(countDownTimer, 10);
                }
            });

            buttonStop.addEventListener("click", function(){
                clearInterval(Interval);
            });

            buttonReset.addEventListener("click", function(){
                clearInterval(Interval);
                minutes = mins;
                seconds = secs;
                tens = mili;
                appendMinutes.innerHTML = (minutes < 10) ? "0" + minutes : minutes;
                appendTens.innerHTML = (tens < 10) ? "0" + tens : tens;
                appendSeconds.innerHTML = (seconds < 10) ? "0" + seconds : seconds;
            });

            function countDownTimer () {
                if((minutes < 1) && (seconds == 0 || seconds == -1) && (tens < 2)) {
                    sound.play();
                    clearInterval(Interval);
                    minutes = "00";
                    seconds = "00";
                    tens = "00";
                    appendMinutes.innerHTML = minutes;
                    appendTens.innerHTML = tens;
                    appendSeconds.innerHTML = seconds;
                    return 0; 
                }
                if(tens > 0) {
                    tens--;
                }
                if(tens < 10) {
                    appendTens.innerHTML = "0" + tens;
                }
                if (tens > 9) {
                    appendTens.innerHTML = tens;
                }
                if(seconds == 0 && tens == 1) {
                    seconds = 60;
                    if(minutes > 0) {
                        minutes--;
                        appendMinutes.innerHTML = minutes;
                    }
                }
                if(tens <= 0) {
                    tens = 100;
                    if(seconds > 0) {
                        seconds--;
                        appendSeconds.innerHTML = seconds;
                    }
                }
                if(seconds < 10) {
                    if(seconds > -1) {
                        appendSeconds.innerHTML = "0" + seconds;
                    }
                }
                if(seconds > 9) {
                    appendSeconds.innerHTML = seconds;
                }
                if(seconds != -1 && seconds == 0 && minutes == 0) {
                    tens == 100;
                    seconds--;
                }
                if(seconds <= 0 && seconds != -1) {
                    if(seconds != 0) {
                        seconds = 59;
                        if(minutes > 0) {
                            minutes--;
                            appendMinutes.innerHTML = minutes;
                        }
                    } else {
                        appendSeconds.innerHTML = '00';
                    }
                }
                if(minutes < 10) {
                    appendMinutes.innerHTML = "0" + minutes;
                }
            }
        }

Answer 1

I'm well aware that the audio can only be played by a user triggered event on mobile devices. In my case user has to press a button before the audio can be played which is START. So I used START as a triggered event and played the audio but right after playing it, I paused it like this :

 buttonStart.addEventListener("click", function(){
    sound.play();
    sound.pause();
 });

And this did the trick for me, the audio did play on mobile devices when the timer expired. :)

Answer 2

Hope this will help. Use this:

sound.reload();

after:

sound.play();