I'm making a website, which must ring a bell 5 min before an event.

The code usually works, but sometimes (for some devices?), it fails to ring the bell and rings it only when page is reloaded.

The code you can find below, as you can see, the same function is run right after reload and every 1 minute, so it's weird that it doesn't ring automatically but rings after page reload.

...

ring_bell: function()
{
        if (<.. Time check is here ..>)
        {
            new Audio('media/bell.mp3').play();
        }
}

...

schedule.ring_bell();
setInterval(() => 
{
    schedule.update_numbers();// updates time values on the web page
    schedule.ring_bell();
}, 60*1000);

Happened on MacBook, in Google Chrome. Other facts to consider:

a) update_numbers gets executed along side with the bell, which updates how the page looks like, including "time left to event" number on the page and the data on page was up to date (i.e. the time was negative), despite the fact that the bell sound hasn't been heard. Thereby one can conclude that timer is not the problem

b) The sound is known to be played successfully when tab is inactive.

I wonder, can something OS related intervene? Is there a way to grantee that the sound is played even if user doesn't touch his device for a long time? I don't need precise timings. +/-1 minute is more than enough.

P.S. I open this question again after it has been instantly closed as a duplicate to How can I make setInterval also work when a tab is inactive in Chrome?, I hope new facts make it clear that it is a different problem and the answer to that question can not help me in the slightest.