timer.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <!-- Meta -->
    <title>Timer</title>
    <meta name="description" content="Timer">
    <meta name="author" content="Nicolas Boumal">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap -->
    <link href="../css/bootstrap.css" rel="stylesheet" media="screen">
    <style type="text/css">
        body {
            padding-top: 0px;
            padding-left: 30px;
        }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>

<body>
    <h1 style="display: block" id="timer">0:00</h1>
</body>


<script>

    function playBeep(frequency = 800, duration = 150) {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const oscillator = ctx.createOscillator();
        const gain = ctx.createGain();

        oscillator.type = 'sine';
        oscillator.frequency.value = frequency;

        oscillator.connect(gain);
        gain.connect(ctx.destination);

        oscillator.start();
        gain.gain.setValueAtTime(1, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration / 1000);

        oscillator.stop(ctx.currentTime + duration / 1000);
    }

    // https://stackoverflow.com/a/57981688/5989015
    class Timer {
        constructor() {
            this.isRunning = false;
            this.startTime = 0;
            this.overallTime = 0;
        }

        _getTimeElapsedSinceLastStart() {
            if (!this.startTime) {
                return 0;
            }

            return Date.now() - this.startTime;
        }

        start() {
            if (this.isRunning) {
                return console.error('Timer is already running');
            }

            this.isRunning = true;

            this.startTime = Date.now();
        }

        stop() {
            if (!this.isRunning) {
                return console.error('Timer is already stopped');
            }

            this.isRunning = false;

            this.overallTime = this.overallTime + this._getTimeElapsedSinceLastStart();
        }

        reset() {
            this.overallTime = 0;

            if (this.isRunning) {
                this.startTime = Date.now();
                return;
            }

            this.startTime = 0;
        }

        getTime() {
            if (!this.startTime) {
                return 0;
            }

            if (this.isRunning) {
                return this.overallTime + this._getTimeElapsedSinceLastStart();
            }

            return this.overallTime;
        }
    }

    const timer = new Timer();
    let state = 'zero'; // states are: 'zero' and 'running'
    let setintervalhandle = null;

    let lastBeepTime = -10000; // Initialize to ensure the first beep plays correctly

    $(document).on('click', () => {
        switch (state) {
            case 'zero':
                $('#timer').html('0:00');
                timer.reset();
                timer.start();
                setintervalhandle = setInterval(() => {
                    const elapsedTime = timer.getTime();
                    $('#timer').text(new Date(elapsedTime).toISOString().substr(15, 4));

                    // Play sound every 10 seconds
                    if (Math.floor(elapsedTime / 1000) % 10 === 0 && elapsedTime - lastBeepTime >= 10000) {
                        let index = Math.floor(elapsedTime / 1000) / 10;
                        let frequency = 440 + (440/6) * index; // Higher frequency for the first beep
                        let duration = (index % 6 === 0) ? 750 : 150; // Longer duration for the first beep
                        playBeep(frequency, duration);
                        lastBeepTime = elapsedTime; // Update the last beep time
                    }
                }, 100);
                state = 'running';
                break;

            case 'running':
                $('#timer').html('0:00');
                clearInterval(setintervalhandle);
                timer.stop();
                state = 'zero';
                lastBeepTime = -10000;
                break;

            default:
                console.log('bad state.');
        }
    });
</script>



</html>