Uploaded October 2025 | Updated September 2026, 2 weeks ago

---

This is a new project that I added to my Modern JS From The Beginning course. It is an ambient sound mixer that plays multiple sounds and allows you to create presets for later listening. It uses an object-oriented paradigm and focuses on concepts like encapsulation and single responsability.

Full Course (40 Hours) - TM & Udemy Versions
- traversymedia.com/modern-javascript-2-0
- udemy.com/course/modern-javascript-from-the-beginning/?couponCode=79727C382484DB5DE9A6

Final Code & HTML/CSS Template
github.com/bradtraversy/ambient-sound-mixer

The theme is in /resources/ambient-sound-mixer-theme

Timestamps:
00:00 - Intro
03:26 - File Structure
07:08 - Template & Setup
11:23 - Sound Data & Main Class Init
19:34 - Sound Manager & Load Sounds
29:50 - Play, Pause & Volume
40:53 - UI Class
53:59 - Event Listeners & Play Button
01:07:27 - Volume Sliders
01:20:48 - Master Volume Slider
01:33:22 - Master Play Button
01:50:11 - Reset Button
02:00:35 - Default Presets
02:18:36 - Save Custom Presets
02:41:24 - Show Custom Presets
02:49:15 - Load Custom Presets
02:59:28 - Delete Custom Preset
03:06:49 - Sleep Timer
03:28:55 - Theme Toggle
03:34:38 - Deploy To Vercel