0

So I have built a small app for my work so they can have a timer running in the background that dings every 10 minutes (when the last digit in the minutes' column is '0') and it works exactly as I intend. However, when the tab is not the focus after about 5 minutes it won't ding. If I switch tabs only a few minutes before it would ding I can hear the sound, but if I switch like 9 minutes before so, it stays silent. I can't figure out how to keep it alive in the background. I don't want to build a windows app because the boss asked for it to be a webpage for convenience. Here is the code that I am using (the clock itself is not my work):

<!DOCTYPE html>
<!-- saved from url=(0095)https://www.nayuki.io/res/full-screen-clock-javascript/full-screen-clock-12hr-with-seconds.html -->
<html style="height:100%; margin:0; padding:0" class="gr__nayuki_io">
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <title>Clock</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <style type="text/css">
            /* Customizable font and colors */
            html {
                background-image: linear-gradient(to bottom right, #0e284e, #6495db);
                font-family: 'Roboto', sans-serif;
                font-weight: bold;
                color: #FFFFFF;
            }
        </style>
        </head>
    
    <body style="display:flex; flex-direction: column; height:100%; margin:0; padding:0; justify-content:center; align-items:center" data-gr-c-s-loaded="true">
        <img id="logo" src="logo.png" alt="Emmaus College" style="height:40%;">
        <p id="clocktext" style="display: block; font-kerning: none; font-size: 22vw; padding: 0; margin: 0;">12:34</p>
        <script src="howler/howler.js"></script>
        <script type="text/javascript">
            "use strict";

            var dingSound = new Howl({
                src: ['Ding.ogg', 'Ding.mp3'],
                loop: false
            });
            var targetWidth = 0.9;  // Proportion of full screen width
            var curFontSize = 20;  // Do not change
            var hasDinged = false; // Check to see if the ding has rung this minute
            
            function updateClock() {
                var d = new Date();
                var s = "";
                s += ((d.getHours() + 11) % 12 + 1) + ":";
                s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes() /*+ ":"*/;
                //s += (10 > d.getSeconds() ? "0" : "") + d.getSeconds() + "\u00A0";
                //s += d.getHours() >= 12 ? "pm" : "am";
                $("#clocktext").text(s);
                setTimeout(updateClock, 1000 - d.getTime() % 1000 + 20);
                
                var endsInZero = d.getMinutes() % 10;
                if (endsInZero == 0) {
                    if (hasDinged == false) {
                        dingSound.play();
                        hasDinged = true;
                    }
                }
                else
                {
                    hasDinged = false;
                }
            }

            updateClock();
        </script>
    </body>
</html>

Any help would be greatly appreciated.

Cheers,

-Scobbo

Scobbo
  • 19
  • 4

1 Answers1

2

Chrome will throttle the JS of tabs which aren't in focus. You should use one setInterval at the beginning for the whole 10 minutes, and then just use the little timeouts for the clock visual. You may need to keep the clock visual in sync using Date.now().

Splox
  • 701
  • 4
  • 14