Why I replaced looping MP3s with live Web Audio API math for my focus timer (Cadenzato)

Every developer knows the pain of trying to get into a deep coding flow state, throwing on a 3-hour rain or brown noise stream, and getting hit with two problems:

1. A sudden loud mid-roll ad that shatters your mental stack right when you are debugging a race condition.
2. Audio loop fatigue. Most ambient focus apps and streams just loop a 60-second MP3 file. Because the human auditory cortex is wired to detect patterns, the moment your ear subconsciously catches the loop seam repeating, your brain wakes up on alert.

On top of that, most visual study timers run unthrottled canvas loops in the background, eating 25% of your GPU and spinning up your laptop fans while your IDE is open.

So I built Cadenzato (https://cadenzato.com), a free, zero-signup focus sanctuary in the browser that solves both problems using pure math and the Web Audio API.

How the procedural audio engine works:

Instead of fetching and looping static audio files, Cadenzato synthesizes every sound wave live in the browser using a custom Web Audio API graph:

1. Live Brownian Noise (-6dB/octave):
   White noise has equal energy across all frequencies, which sounds like a harsh high-pitched hiss after 20 minutes. By integrating white noise samples over time inside a Float32Array buffer (with a leaky integrator to prevent DC offset drift), we get deep Brown Noise that rolls off high frequencies at -6dB per octave. Because the samples are calculated dynamically, it never repeats a loop.

2. Procedural Rain & Hearth Fire:
   Rainfall is synthesized by routing pink-filtered noise through dual BiquadFilterNode bandpass stages with randomized micro-transients for individual droplet acoustics. Hearth fire layers low-frequency rumble below 180Hz with stochastic high-passed crackle envelopes.

3. 40Hz Gamma Binaural & Isochronic Pulse:
   For heavy architectural work, a pair of precision Sine Wave OscillatorNodes (200Hz left ear, 240Hz right ear) creates a gentle 40Hz gamma frequency differential without fatiguing the ear.

How we kept background CPU/GPU at 0%:

A focus tool should never slow down your compiler or IDE. Cadenzato includes 5 live 60fps HTML5 Canvas scenes (Warm Cafe, Botanical Grass, Ocean Drift, Rainfall, and Obsidian), but listens to the browser Page Visibility API (document.hidden). The instant you Alt+Tab back to VS Code or switch windows, the canvas render loop suspends completely to 0% GPU usage while the Web Audio synthesizer continues running on its dedicated audio thread.

No accounts, no ads, no paywalls:

You can open it, press Space to start a 50/10 or 90/15 deep work block, mix your audio channels, and get straight to coding.

Live app: https://cadenzato.com

I would love to hear what timer intervals (25/5 vs 50/10 vs 90/15) and audio setups other devs here use when writing code!