Background Noise

Overview

A minimal, zero-dependency ambient sound generator for focus, sleep, and relaxation. Features 21 sounds across four categories — procedurally generated color noises (Brown, White, Pink, Green, Blue, Violet, Gray), nature recordings, scene ambiences, and ASMR — all powered by the Web Audio API with real-time waveform visualization, crossfade transitions, and full offline support via Service Worker.

Key Features

• 21 ambient sounds across 4 categories: 7 procedurally generated color noises via Web Audio API synthesis, 6 nature sounds, 5 scene ambiences, and 3 ASMR sounds
• Real-time auto-scaling waveform visualizer using AnalyserNode frequency data, color-coded to the active sound with requestAnimationFrame rendering and high-DPI awareness
• Seamless 1-second audio crossfading between sounds using dual GainNode fade transitions to prevent pops and jarring switches
• Sleep timer with preset durations (15m, 30m, 1h, 2h), real-time countdown display, and automatic playback stop
• Full offline support via Service Worker with cache versioning, localStorage preference persistence, and PWA-ready manifest for native app install on iOS/Android
• Zero-dependency single-file architecture — no frameworks, no build tools, no npm packages — with iOS media playback workaround using MediaStreamDestination to bypass the mute switch

Challenges & Solutions

The project tackled challenges including implementing procedural audio synthesis for 7 color noise algorithms (Brown, White, Pink, Violet, Blue, Green, Gray) using AudioContext buffer sources with biquad filtering for tone shaping and exponential envelope modeling for heartbeat synthesis, building an iOS media playback workaround that pipes Web Audio API output through MediaStreamDestination to an <audio> element to bypass the mute switch with graceful degradation on unsupported browsers, managing crossfade transitions with separate sourceNode and fadingSource references during 1-second fades, rendering auto-scaling waveform visualizations with device pixel ratio awareness for crisp high-DPI displays, and implementing Service Worker caching with versioned cache keys for reliable offline support.