Ambient Generator is a lightweight web application that creates relaxing soundscapes directly in the browser using procedural audio synthesis and canvas animations.
Unlike traditional ambient apps, this project does not use audio files. All sounds are generated in real time using the Web Audio API.
- 🌧 Rain
- 🌊 Ocean Waves
- 🌌 Night Sky
- 🔥 Fireplace
- 🌲 Deep Forest
- 🚆 Train Journey
- ❄️ Snow Cabin
- 🎚 Individual volume control for each environment
- 🔊 Master volume control
- 🎧 Real-time sound synthesis
- ⚡ No audio assets required
- 🧘 Zen Mode – distraction-free listening
- ⏱ Sleep Timer – automatically stop ambience
- 🎛 Preset soundscapes
- 🖱 Interactive spatial audio (mouse-based panning)
- 🎨 Canvas-based animated environments
- 🌌 Dynamic visualizer reacting to active ambience
- Next.js 16
- React 19
- TypeScript
- Web Audio API
- HTML Canvas
src
├─ app
│ ├─ page.tsx
│ ├─ layout.tsx
│ ├─ globals.css
│ └─ page.module.css
│
├─ components
│ ├─ CanvasVisualizer.tsx
│ ├─ Timer.tsx
│ └─ Timer.module.css
│
└─ lib
└─ AudioEngine.ts
Clone the repository
git clone https://github.com/sudo-pixel-spec/Ambient-Generator.git
cd Ambient-GeneratorInstall dependencies
npm installRun the development server
npm run devOpen in browser
http://localhost:3000
Ambient Generator synthesizes sound using mathematical noise and oscillator patterns.
Examples:
Rain → filtered white noise bursts Waves → pink noise with rhythmic gain modulation Fireplace → brown noise rumble with random crackle spikes Night Sky → layered oscillators with slow LFO modulation
This allows the entire ambient environment to run fully client-side with minimal assets.
Possible enhancements
- More ambient environments
- Mobile UI improvements
- Advanced spatial audio
MIT License