This is a interval timer - a timer that can do 6 min., 2 min., 2 min., 2 min. 2 min., 2 min., 2 min., 4 min. in a sequence for a total of 22 minutes.

timer-with-beep.html

<script>
const timerSequence = [6, 2, 2, 2, 2, 2, 2, 4]; // in minutes
let currentTimerIndex = 0;

function beep() {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();

    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);

    gainNode.gain.setValueAtTime(1, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.5);

    oscillator.frequency.value = 440;
    oscillator.type = 'sine';
    oscillator.start(audioContext.currentTime);
    oscillator.stop(audioContext.currentTime + 0.5);
}

function startTimer(duration, display) {
    let timer = duration, minutes, seconds;
    const countdown = setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        /*Introduction: 6 min.
Side A: 2 min.
Side B: 2 min.
Side A: 2 min.
Side B: 2 min.
Side A: 2 min.
Side B: 2 min.
Horizon scan: 4 min.
*/
        let stage
        switch (currentTimerIndex) {
            case 0:
                stage = "Introduction"
                break;
            case 1:
            case 3:
            case 5:
                stage = "Side A"
                break;
            case 2:
            case 4:
            case 6:
                stage = "Side B"
                break;
            case 7:
                stage = "Horizon scan"
                break;
            default:
                break;
        }

        display.textContent = stage+": "+timerSequence[currentTimerIndex]+" min.\n" + minutes + ":" + seconds;

        if (--timer < 0) {
            clearInterval(countdown);
            beep(); // Play beep sound at the end of each interval
            currentTimerIndex++;
            if (currentTimerIndex < timerSequence.length) {
                startTimer(timerSequence[currentTimerIndex] * 60, display);
            } else {
                display.textContent = "Finished!";
            }
        }
    }, 1000);
}

window.onload = function () {
    const display = document.createElement('h1');
    display.style.fontSize = '48px';
    display.style.fontFamily = 'monospace';
    display.style.position = 'fixed';
    display.style.top = '50%';
    display.style.left = '50%';
    display.style.transform = 'translate(-50%, -50%)';
    document.body.appendChild(display);
    const startButton = document.createElement('button');
    startButton.textContent = 'Start';
    startButton.style.position = 'fixed';
    startButton.style.top = '60%';
    startButton.style.left = '50%';
    startButton.style.transform = 'translate(-50%, -50%)';
    document.body.appendChild(startButton);

    startButton.onclick = function () {
        startButton.style.display = 'none'; // Hide start button after clicking
        startTimer(timerSequence[currentTimerIndex] * 60, display);
        beep()
    };

};

</script>

Introduction: 6 min.
Side A: 2 min.
Side B: 2 min.
Side A: 2 min.
Side B: 2 min.
Side A: 2 min.
Side B: 2 min.
Horizon scan: 4 min.