Procedural WebAudio Soundscapes: How Room Focus Density Modulates Rain and Ambience

Eliminating the Dreaded MP3 Loop Seam

Nothing ruins a peaceful rain soundscape faster than an audible click or 50-millisecond gap every time an audio file loops. Standard HTML5 `<audio loop>` elements suffer from encoder padding silence at the start and end of MP3 frames.

In `src/audio/engine.ts`, we decode our CC0 field recordings (`rain.mp3`, `room.mp3`, and `fire.mp3`) directly into WebAudio `AudioBuffer` objects and schedule `AudioBufferSourceNode` playback with explicit `loopStart` and `loopEnd` offsets inset by 0.5 seconds on both ends. We also randomize the initial playback offset on entry so every session starts on a fresh raindrop.

Collective Focus Density Modulation

In a real library, the acoustic atmosphere changes when everyone in the room is deeply locked in. Hushroom calculates a continuous `focusDensity` ratio (from 0.0 to 1.0) based on the proportion of participants currently in Focusing status.

As `focusDensity` rises toward 1.0, our audio engine smoothly interpolates the rain gain node (`setTargetAtTime`), softening the exterior weather so the interior room feels hushed and intimate. When several people transition to break at once, the rain swells gently back up.

Synthesizing Chimes and Cat Purrs in Pure Code

Rather than loading extra sound effects for UI cues, our phase-transition chime is synthesized in real time using three sine oscillators tuned to an E-major triad (659.25 Hz, 987.77 Hz, and 1318.5 Hz) with exponential decay envelopes. Clicking a room cat triggers a procedural purr built from brown noise filtered at 180 Hz, amplitude-modulated by a 24 Hz low-frequency oscillator, and topped with a tiny triangle-wave chirp.