The Web Audio API

Modern browsers ship with a powerful built-in sound engine called the Web Audio API. Originally designed for games and interactive applications, it gives developers precise, low-latency control over audio synthesis, processing, and spatialization — all without any plugins or downloads.

Noisescape uses this API as its entire audio backend. When you click a sound card, JavaScript code running in your browser tab generates that sound mathematically, in real time, using your device's own audio hardware. The result is indistinguishable from — and often smoother than — recorded audio files, because there are no compression artifacts, no loop seams, and no network latency.

The audio graph

The Web Audio API models sound as a graph of connected nodes. Each node transforms the audio signal in some way — generating it, filtering it, amplifying it, or routing it to your speakers. Here's a simplified version of how a rain sound is constructed:

AudioBufferSourceNode (white noise) → BiquadFilterNode (bandpass ~4200 Hz) ← rain hiss → GainNode (individual volume) ↓ AudioBufferSourceNode (white noise) → BiquadFilterNode (bandpass ~900 Hz) ← rain on surfaces → GainNode ↓ OscillatorNode (0.7 Hz sine) ← natural variation LFO → GainNode (modulation depth) → GainNode.gain AudioParam ← modulates master level ↓ MasterGainNode → AudioContext.destination (speakers)

Every sound in Noisescape is built from variations of this pattern — noise sources filtered and shaped into recognizable acoustic textures.

The eight sound generators

Each sound uses a different combination of noise buffers, filters, oscillators, and gain modulation. Here's how each one is built:

〰️ White Noise

Pure random values between -1 and 1 fill an audio buffer. Every frequency is equally represented — the acoustic equivalent of a blank canvas. Ideal for general masking.

🌊 Brown Noise

Each sample is generated by integrating (accumulating) white noise. This creates a signal where lower frequencies dominate — a deep, warm rumble with a -6 dB/octave slope. Many people find it more soothing than white noise.

🌸 Pink Noise

The Voss-McCartney algorithm uses six parallel white noise generators, each updating at half the rate of the previous. The sum produces a -3 dB/octave slope — balanced between white and brown, matching how human hearing perceives equal loudness across octaves.

🌧️ Rain

Three filtered noise bands — a high bandpass (4200 Hz) for the hiss of individual drops, a mid bandpass (900 Hz) for rain hitting surfaces, and a lowpass for bass rumble — are mixed and gently modulated by a 0.7 Hz LFO to create natural variation.

⛈️ Thunderstorm

Rain synthesis plus a very low lowpass filter (80 Hz) for subsonic rumble, and a separate burst gain node that creates thunder cracks at randomized intervals using AudioParam automation curves.

☕ Coffee Shop

Four overlapping bands: a low bandpass (280 Hz) for murmur, a narrow mid bandpass (1100 Hz) for chatter, a very subtle high bandpass (3000 Hz) for ambient presence, and a lowpass (400 Hz) for room tone. Two LFOs at 0.4 Hz and 1.1 Hz create the rhythm of conversation.

🏖️ Ocean Waves

A lowpass filter (500 Hz) creates the deep surge of surf, while a high bandpass (2800 Hz) adds foam and hiss. Two very slow LFOs — at 0.12 Hz and 0.07 Hz — create the rhythmic rise and fall of waves crashing, about 7–8 seconds per cycle.

🌲 Forest

Wind through trees (lowpass 350 Hz), leaf rustle (bandpass 1800 Hz), and distant high-frequency rustles (bandpass 4500 Hz) are layered and animated by a 0.2 Hz LFO for wind gusts and a 0.5 Hz LFO for leaf movement.

How mixing works

Each active sound connects its output GainNode to a single MasterGainNode, which connects to your speakers. WebAudio automatically sums all incoming signals at each connection point — so enabling multiple sounds creates an instantaneous mix with zero interference. You can layer all eight sounds simultaneously if you wish, adjusting each independently.

The individual volume slider for each sound sets the gain of that sound's output node. The master volume slider controls the MasterGainNode. All gain changes are applied using setTargetAtTime() with a short time constant to prevent clicks and pops during adjustments.

The sleep timer

When you set a timer, Noisescape stores the target end time and uses setTimeout() to count down. When time is up, it triggers a 12-second fade using the AudioParam automation API:

masterGain.gain.linearRampToValueAtTime(0.0001, currentTime + 12);

This smooth fade prevents the jarring experience of sound cutting out abruptly — an important consideration when using Noisescape for sleep. After the fade completes, all source nodes are stopped and disconnected to free memory.

Why this approach beats audio files

Privacy & security

Because Noisescape generates sound locally, there is nothing to track. We don't know what sounds you play, for how long, or at what volume. No audio data ever leaves your device. The only network requests made after the initial page load are for Google Fonts (typography) and — if you have an AdSense account — ad serving scripts. The audio engine itself is entirely self-contained JavaScript.

Open standard. The Web Audio API is a W3C standard supported by every modern browser — Chrome, Firefox, Safari, Edge, and their mobile counterparts. If your browser can play YouTube, it can run Noisescape.

How presets work

The built-in presets (Deep Focus, Sleep, Rainy Day, etc.) are simply predefined volume configurations. When you select a preset, the UI stops all current sounds, then starts the preset sounds with pre-set volume levels. The audio engine underneath is identical — presets are just a convenience layer on top of the same mixing controls you use manually.

Start listening now

Understanding how it works is interesting — but experiencing it is better. Head to the generator and try layering a few sounds together. Most people find their personal mix within a couple of minutes.

→ Open Generator → Science of Focus Sounds → Best Sounds for Sleep → FAQ