Play html5 audio sound when Phone screen is off

Question

I am building a mobile optimized website and would like to play a sound after a counter is over. Usually, after 2 or more minutes.

The problem is that once the phone's screen is off, the phone disables my js, and prevents the audio from playing.

Potential Solution:

I read this In the solution #3, u can loop 2 tracks sequentially, and the mobile phone will still play both even when screen is off. So the trick I found is to use that loop, but have the first sound: 1. Be silence. Yes, complete 5min silence audio 2. have it loop as many times required before enough time has passed for second song to play.

So for instance, in here, silence audio will play twice before the other sound plays. The trick is to control the max variable to achieved the desired output.

var count = 0;
var max = 2;
document.getElementById('silence_audio').addEventListener('ended', function () {
    this.currentTime = 0;
    this.pause();
    if (count < max) {
        document.getElementById('silence_audio').play();
        count++;
    } else {
        document.getElementById('audio_4').play();
    }
}, false);

document.getElementById('audio_4').addEventListener('ended', function () {
    this.currentTime = 0;
    this.pause();
    document.getElementById('silence_audio').play();
}, false);

But my question is, are there any other better solutions?

Thank you!