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

Description and use

Cadenzato replaces looping MP3s with live Web Audio API synthesis, eliminating ads and loop fatigue, and reduces GPU load by pausing canvas rendering when the tab is hidden.

Problem

Developers experience interruptions from mid-roll ads and audio loop fatigue when using ambient focus apps, and visual timers can consume significant GPU resources.

Outcome

Cadenzato eliminates mid‑roll ads and audio loop fatigue while keeping CPU/GPU usage minimal, enabling developers to maintain deep focus during coding sessions.

Workflow

• 1. User opens Cadenzato in the browser.
• 2. Presses Space to start a Pomodoro interval (e.g., 50/10).
• 3. Selects or mixes audio channels (Brownian noise, rain, hearth fire, binaural pulses).
• 4. The app synthesizes each sound live using custom Web Audio API graphs.
• 5. Canvas scenes render at 60fps only while the tab is visible; when hidden, rendering stops and GPU usage drops to 0%.
• 6. User returns to IDE; audio continues uninterrupted, no ads or accounts required.

Evidence

Most ambient focus apps and streams just loop a 60-second MP3 file.

Source

Cadenzato synthesizes every sound wave live in the browser using a custom Web Audio API graph

Source

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.

Source