Noise Bench

Continuous colored noise in a single HTML file — white, pink, brown, blue, violet, gray and green. Generated in the browser, level-matched across colors, with a spectrum analyzer that plots the measured curve against the theoretical slope so you can check the −3 dB/octave rather than take it on faith.

No build step, no dependencies, no network requests, nothing recorded. public/index.html is entirely self-contained — fonts included — and is the whole application.

The colors

Five are power laws: spectral density falls off as 1/f^α, and the color name just encodes α. Two are not, and it's worth knowing which.

Gray and green are approximations of informal targets, and the page says so rather than presenting them as settled.

Controls

Space toggles playback; 1–7 select a color.

How it works

One seamlessly-looping stereo white buffer feeds seven parallel filter chains, crossfaded on switch — instant color changes, and one buffer in memory instead of seven. Pink is an IIRFilterNode running the standard four-tap approximation; brown is a one-pole leaky integrator followed by a 22 Hz high-pass to kill DC; violet is a one-sample differentiator; blue is pink through that same differentiator.

Levels are measured, not guessed. On first play each chain is rendered through an OfflineAudioContext, its RMS measured, and a makeup gain applied to bring it to a common target. Unnormalized, brown and violet differ by tens of decibels — enough to be a hazard at headphone volume when switching.

Two playback paths

iOS suspends an AudioContext when the tab backgrounds or the screen locks, but keeps a media element playing. Those can't be reconciled in one signal path — routing a media element back through createMediaElementSource puts it under the AudioContext again — so the page carries both and lets you choose.

HTMLMediaElement.volume is read-only on iOS, so in Lock screen mode there you use the hardware buttons.

Making the loop inaudible

A looping media element is not sample accurate — browsers insert a small gap when one wraps, which on brown noise reads as a thump every time round. Lock screen mode therefore doesn't rely on gapless looping at all.

It renders 24 seconds of the selected color, discards a 3-second pre-roll so every filter starts in steady state, and bakes a raised-sine envelope sin(πt/L) into the result so the file fades to silence at both ends. Two copies then play half a period apart. Because sin² + cos² = 1 they sum to constant power — and each file's loop point now sits at zero amplitude, so whatever the browser does when it wraps is inaudible: that copy contributes nothing at that instant while the other is at full level.

Three details make that actually work:

• The offset comes from starting the second copy late, never from seeking. Setting currentTime races the element's load, and a seek that silently fails leaves both copies in phase — the envelope becomes 2·sin() rather than sin/cos and the output falls to zero once per loop. A phone speaker's low-frequency rolloff and AGC hide that completely; headphones expose it at once. Starting late makes the offset true by construction, and both elements then advance on the same audio clock, so they don't drift.
• Each element gets its own Blob and object URL. Sharing one resource between two media elements is contended on some browsers, and the second simply refuses to play.
• There is no compressor in the render. Its gain reduction hasn't settled at sample zero, which left the head of the file louder than the tail. Peak is measured afterward and scaled only if it exceeds −6 dBFS, which preserves the RMS level-matching between colors instead of peak-normalizing them.

A health check runs every two seconds and measures what is actually happening — whether the second copy is advancing, and whether it is genuinely half a period behind. The measured offset appears in the Path readout as media · 2 players · Δ12.0s. If the offset can't be held, the page falls back to a single player with a crossfade-sealed loop and says so.

The wave LFO, when enabled, is fitted to an integer number of cycles per half loop, so both offset copies carry the same envelope value at any instant and it doesn't partially cancel.

Deploying

The whole app is public/index.html. Any static host will serve it.

npx wrangler deploy          # Cloudflare Workers, per wrangler.toml

Check wrangler.toml against your wrangler version — the static-assets config key has changed across releases.

Content-Security-Policy

Everything is inlined, so a default-deny policy will break the page silently. It needs three allowances:

default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; font-src data:; base-uri 'none'; form-action 'none'

If 'unsafe-inline' is unacceptable, hash the script and style blocks instead — the hashes need recomputing on every edit.

A note on file size

The three typefaces are embedded as base64 woff2, which is roughly 130 KB of the file. Base64 adds 33% to already-compressed woff2 and Brotli can't win much of it back. For a page opened once and left running that's irrelevant; on a high-traffic site, serve the fonts as separate cacheable files instead.

Browser support

Needs AudioContext, OfflineAudioContext and IIRFilterNode — Chrome 49+, Firefox 50+, Safari 14.1+. Without IIRFilterNode the page falls back to cruder biquad approximations rather than failing. Screen Wake Lock is optional and the button disables itself where it's unavailable.

License

Public domain, under The Unlicense. Do whatever you like with it.

The embedded typefaces are third-party and keep their own licenses — OFL 1.1 for Chivo and Public Sans, Apache 2.0 for Roboto Mono. See NOTICE; the same notices ride along inside public/index.html beside the @font-face rules, so they travel with the file wherever it's served.