Colored noise generator · Web Audio API
Seven noise colors, generated continuously in the browser and level-matched so switching between them doesn't change how loud it is. The analyzer draws the measured spectrum against the theoretical slope, so you can see the −3 dB per octave rather than take it on faith.
Band
Narrowing the band is the most effective way to make any color less fatiguing — most harshness lives above 6 kHz, most rumble below 60 Hz.
Movement
A slow amplitude swell, roughly the cadence of surf. Static noise can read as mechanical; a little movement reads as weather.
Output
Left and right are independent noise, which is wider and markedly less fatiguing on headphones. Mono collapses them if you need a single correlated source.
Most are power laws: spectral density falls off as 1/fα, and the color name just encodes α. Two of the seven are not, and it's worth knowing which.
| Color | Slope | α | What it is |
|---|---|---|---|
| White | 0 dB/oct | 0 | Flat power per hertz. Every sample independent and uniform. Bright and hissy, because equal power per hertz means far more energy in the top octave than the bottom. |
| Pink | −3 dB/oct | 1 | Equal power per octave, which matches how hearing is organized — so it sounds balanced rather than bright. The most common choice for masking and sleep, and what most "white noise" apps actually play. |
| Brown | −6 dB/oct | 2 | Integrated white noise — a random walk, hence Brownian rather than a color. Deep and rumbling, like heavy rain or a waterfall heard through a wall. |
| Blue | +3 dB/oct | −1 | Pink inverted. Hissy and thin; used in dithering, rarely for listening. |
| Violet | +6 dB/oct | −2 | Differentiated white noise. Almost all energy at the top of the band. Sometimes used in tinnitus therapy; hard listening otherwise. |
| Gray | contoured | — | Not a power law. White noise shaped by an inverse equal-loudness contour, so it's perceived as equally loud at every frequency — which means cutting the 2–5 kHz region where hearing is most sensitive and lifting both ends. |
| Green | −3 dB/oct + 500 Hz | — | Not a standard. No IEEE or ANSI definition exists; it's a de-facto term for mid-band-weighted noise said to resemble the ambient sound of open country. Implemented here as pink with a broad lift around 500 Hz and the extreme top rolled off. |
A single stereo white-noise buffer loops continuously and feeds seven parallel filter chains; switching color crossfades between their output gains over 140 ms. That makes changes instant and click-free, and keeps memory to one buffer instead of seven.
Pink is an IIRFilterNode running the standard four-tap pink approximation,
accurate to about ±0.1 dB across the audible band. Brown is a one-pole leaky integrator;
violet is a one-sample differentiator; blue is pink through that same differentiator.
The buffer is generated with an extra 0.4 s tail that is equal-power crossfaded back into its own head, so the loop point is continuous. For white noise a hard cut would be inaudible — but brown noise is that same signal integrated, and integrating a step discontinuity produces an audible thump once every loop.
On startup each chain is rendered through an OfflineAudioContext and its RMS
measured, then a makeup gain is applied so every color arrives at the same level.
Unnormalized, brown and violet differ by tens of decibels.
iOS suspends an AudioContext when the tab is backgrounded or the screen locks,
but keeps a media element playing and gives it lock-screen controls. Those two facts can't be
reconciled in one signal path — feeding a media element back through
createMediaElementSource puts it under the AudioContext again — so the page carries
both and lets you pick.
| Web Audio | Lock screen | |
|---|---|---|
| Survives screen lock | Android only | Yes, both platforms |
| Lock-screen controls | No | Yes, with artwork |
| Live analyzer | Yes | Theoretical curve only |
| Changing color or band | Instant | Re-renders, about a second |
| Volume slider | Yes | Ignored on iOS — use hardware volume |
A looping media element is not sample accurate — browsers insert a small gap when one wraps, and on brown noise that reads as a thump every time round. So Lock screen doesn't rely on gapless looping at all. It renders 30 seconds of the selected color, bakes a raised-sine envelope into it so the file fades to silence at both ends, and plays two copies half a period apart.
Because sin² + cos² = 1, the two 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 and the other is at full level. A three-second pre-roll is rendered and discarded so every filter starts in steady state, and there is no compressor in the render, since its gain reduction hadn't settled at sample zero and left the head of the file louder than the tail.
The offset is established by starting the second copy late, never by seeking.
Setting currentTime races the element's load, and a seek that silently fails
leaves both copies running in phase — the envelope becomes 2·sin() rather than sin/cos, and the
output dips to zero once per loop. A phone speaker's 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.
Each element also gets its own Blob and object URL, since sharing one resource
between two media elements is contended on some browsers. A health check measures what is
actually happening — whether the second copy is advancing, and whether it is genuinely half a
period behind — and shows the measured offset in the Path readout. If it can't be held,
the page falls back to a single player with a crossfade-sealed loop.
Lock screen defaults on for touch devices and off elsewhere. Keep awake remains as a belt-and-braces option for platforms that ignore both.
Runs entirely in this page — no samples, no streams, no network calls, nothing recorded. Space bar toggles playback; number keys 1–7 select a color.