How to set up a HIIT / Tabata interval timer in the browser

Why an interval timer needs to be friction-free

HIIT (High-Intensity Interval Training) and Tabata workouts depend on holding precise work and rest seconds. The original Tabata protocol is exactly 20 seconds of work and 10 seconds of rest, repeated 8 times for a total of 4 minutes — bend the seconds and you no longer have Tabata. Common HIIT variants like 30/30, 45/15, and 40/20 carry the same expectation of second-accuracy.

The pain point in practice is the cold start. Launching a phone app, dismissing its ad, picking a preset, and pressing start every single time eats your motivation. Opening a single browser tab — on your laptop in the living room, on a phone at the gym, on a tablet on the floor — and having the timer running in two clicks is what makes the habit stick. That is the role of the in-browser interval-timer.

Setting it up in the browser

Open interval-timer and pick a preset from the row of buttons: Tabata (20s/10s × 8R), HIIT 30/30, HIIT 45/15, or HIIT 40/20. If you want a custom routine instead, fill the warm-up, work, rest, cool-down, and round count fields directly. Settings are persisted to localStorage, so the next time you open the tab the same setup is restored without any account.

Hit start and you get a large current-phase / remaining-seconds / round-progress display. Phase transitions trigger short Web Audio beeps: an 880 Hz high tone when work starts, a 440 Hz low tone for rest, a chord at the end of the session, and an optional 3-second countdown tick before each transition. You can drop the phone on the bench and follow the audio cues without looking at the screen.

Why it does not drift in a background tab

A classic problem with browser-based timers is that setTimeout and setInterval are throttled when the tab is no longer focused — a “tick every second” callback may fire only every few seconds, and even less often on phones with the screen off. To avoid drifting through the workout, interval-timer does not count callback fires; it reads performance.now() and computes the elapsed delta. Even if the browser delays a tick, the very next callback sees the real elapsed time and snaps to the correct phase, so when you bring the tab back into focus the round and remaining seconds are already correct.

The audio is generated on the fly with the Web Audio API. Rather than fetching MP3 sound effects, the timer wires up an OscillatorNode to a GainNode, sets a frequency, and uses exponentialRampToValueAtTime for a short fade. Nothing is downloaded, so once the page is open the timer works offline too. Note that iOS Safari refuses to start an AudioContext without a user gesture, so the first “Start” click also calls audioContext.resume() behind the scenes.

How this differs from app-store and SaaS timers

Phone interval-timer apps are convenient but they typically ship with ad and analytics SDKs, sending an advertising identifier to networks every time you open the app. Web-based SaaS timers also need to call home to store your settings on their backend. The workout content itself is hardly sensitive, but “when and how often you train” is a health-adjacent behavioural log that some people would rather not hand over to a third party.

interval-timer stores configuration in localStorage, generates sound with AudioContext, and runs the clock with performance.now() — there is no code path that sends data outward. Keep the DevTools Network tab open through a 4-minute Tabata session and, after the initial asset load, no requests appear. The source is auditable on GitHub. For other time tools in the same family, see stopwatch for raw timing or pomodoro-timer for 25-minute focus blocks — same browser-only design.