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
- https://www.traversymedia.com/modern-javascript-2-0
- https://www.udemy.com/course/modern-javascript-from-the-beginning
Final Code & HTML/CSS Template
https://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