Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Ambient Sound Mixer - JavaScript OOP Project

Traversy Media via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Build a comprehensive ambient sound mixer application using JavaScript's object-oriented programming paradigm in this 3 hour and 40 minute tutorial. Learn to create a fully functional web application that plays multiple ambient sounds simultaneously and allows users to create custom presets for later listening. Master key OOP concepts including encapsulation and single responsibility principle while developing a practical project. Start by setting up the file structure and HTML/CSS template, then implement the core Sound Manager class to handle audio loading, playback, pause functionality, and volume controls. Develop a dedicated UI class to manage user interface interactions and create event listeners for play buttons and volume sliders. Build advanced features including master volume control, reset functionality, default preset management, and custom preset creation with save, load, and delete capabilities. Implement additional features such as a sleep timer for automatic shutoff and theme toggle functionality for enhanced user experience. Complete the project by deploying the finished application to Vercel for live hosting. Access the complete source code and HTML/CSS template through the provided GitHub repository to follow along with the development process.

Syllabus

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

Taught by

Traversy Media

Reviews

Start your review of Ambient Sound Mixer - JavaScript OOP Project

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.