30 Days of Vibe Coding - Day 25 - SoundScape
An ambient sound mixer with procedurally generated audio, presets, a lo-fi beat generator, and shareable mixes.
An ambient sound mixer with procedurally generated audio, presets, a lo-fi beat generator, and shareable mixes.
Day 25. I built myself the exact app I would actually use while building all the other days.
The Prompt
The idea was simple: an ambient sound mixer where you layer sounds together to create a background atmosphere for working, relaxing, or sleeping. Think of those "coffee shop ambience" YouTube videos, but interactive and customizable.
The interesting constraint was that I wanted all audio to be procedurally generated using the Web Audio API. No sample files, no audio assets to load. Everything synthesized in the browser.
Try it out yourself here
How It Was Built
Watchfire broke this down into 10 tasks. The initial plan actually used Howler.js with pre-recorded sound files, but I pivoted early to procedural generation with the Web Audio API. That meant every sound you hear, from rain to a crackling fireplace, is being generated mathematically in real time. No MP3s, no downloads, no loading screens.
What I Got
12 sounds across 3 categories. Nature, Urban, and Cozy. Each one has its own card with a volume slider, and you can mix and match however you want. The Nature category has things like rain, forest, and ocean waves. Urban has coffee shop chatter and keyboard typing. Cozy has fireplace crackling.
The master controls are clean. Three sliders at the top for Ambience, Music, and overall volume, plus a timer button for sleep mode. The glassmorphism UI looks genuinely good against the dark background.
Presets make it instantly useful. There are four built-in presets: Rainy Coffee Shop, Forest Cabin, Late Night Coding, and Ocean Breeze. One click and you get a curated mix. Forest Cabin, for example, activates Forest, Wind, Birds, and Fireplace at different volume levels. You can also save your own custom presets to localStorage.
Every sound is procedurally generated. Rain is white noise shaped with filters. Wind is low-frequency oscillators with slow modulation. Birds are short sine wave chirps with randomized timing. The fireplace is filtered noise with crackle bursts. None of it sounds perfect, but it all sounds recognizable and blends together well enough that your brain fills in the gaps.
...
---
Read the full article →

Add a comment: