DEV Community

Cover image for How I built a 7KB offline Focus & Brown Noise synth inside a single HTML file (No MP3s, just Web Audio API math)
lnz79d612
lnz79d612

Posted on

How I built a 7KB offline Focus & Brown Noise synth inside a single HTML file (No MP3s, just Web Audio API math)

I wanted a clean focus timer, scratchpad, and ambient sound generator that works 100% offline without accounts, cloud sync, or bloated desktop apps.

So under my indie label Appthecary, I built Kanso: a minimalist workspace that lives entirely inside a single 7KB .html file you can drop on your desktop or USB drive.

Synthesizing Brown Noise with Math (Zero MP3s)

Instead of bundling heavy audio loops, Kanso uses the browser's native AudioContext to generate a 3-second looping buffer of procedural brown noise by integrating white noise samples in real time, routed through a BiquadFilterNode (low-pass filter from 120Hz to 1500Hz):

let lastOut = 0.0;
for (let i = 0; i < bufferSize; i++) {
  const white = Math.random() * 2 - 1;
  data[i] = (lastOut + (0.02 * white)) / 1.02;
  lastOut = data[i];
  data[i] *= 3.5;
}
Enter fullscreen mode Exit fullscreen mode

Features inside the 7KB file:

  • Procedural Brown Noise Synth with real-time Warmth (Low-Pass) and Volume sliders.
  • Focus Timer (25m / 50m) with a synthesized 528Hz sine-wave chime.
  • Local Scratchpad with auto-save to localStorage and one-click .txt export.

Try it / Grab the file

I put the ready-to-use .html file on Gumroad as Pay-What-You-Want ($0 to download for free, or $1 if you want to buy me an espresso):

Feel free to inspect the source code and hack it however you like!

Top comments (0)