Welcome to Modern Music Player — a sleek, responsive web-based music player with full playlist functionality! This project was built as part of the JavaScript Algorithms and Data Structures curriculum on freeCodeCamp, demonstrating advanced DOM manipulation and audio API integration.
Course: JavaScript Algorithms and Data Structures
Complete Your Certificate:
- ✅ This project (Music Player) fulfills one requirement
Full Project Suite: 25+ hands-on projects from Pyramid Generator to Final Certification Projects
- 🎓 Complete all projects to earn your certification
This repository contains the complete portfolio of projects needed to demonstrate JavaScript proficiency and earn the freeCodeCamp certificate.
Live Demo: https://acheronx0577.github.io/JavaScript-Building-a-Music-Player
-
🎵 Full Music Playback
- Play, pause, next, previous controls
- Real-time progress bar with seek functionality
- Volume control slider
-
📋 Playlist Management
- 10 pre-loaded songs by Quincy Larson
- Add/remove songs from playlist
- Shuffle functionality for random playback
- Search through your playlist
-
🎨 Modern UI/UX
- Responsive design for all devices
- Smooth animations and hover effects
- Current song highlighting
- Progress tracking with time display
-
⌨️ Keyboard Shortcuts
- Spacebar - Play/Pause
- Arrow Right - Next song
- Arrow Left - Previous song
▶️ Play/Pause: Click the play button or press Spacebar- ⏭️ Next Song: Click next button or press Right Arrow
- ⏮️ Previous Song: Click previous button or press Left Arrow
- 🔀 Shuffle: Randomize playlist order
- 🔍 Search: Type in search box to filter songs
- Click any song in the playlist to play it immediately
- 🗑️ Delete songs using the delete button next to each track
- Reset playlist when empty to restore all songs
git clone git@github.com:acheronx0577/JavaScript-Building-a-Music-Player.git
cd JavaScript-Building-a-Music-Player
Just open index.html in your favorite browser 🌐 and start playing!
The player comes with 10 original tracks by Quincy Larson:
- "Scratching The Surface" (4:25)
- "Can't Stay Down" (4:15)
- "Still Learning" (3:51)
- "Cruising for a Musing" (3:34)
- "Never Not Favored" (3:35)
- "From the Ground Up" (3:12)
- "Walking on Air" (3:25)
- "Can't Stop Me. Can't Even Slow Me Down." (3:52)
- "The Surest Way Out is Through" (3:10)
- "Chasing That Feeling" (2:43)
Audio()object and its methodsaddEventListenerfor multiple event types- Array methods:
map(),filter(),find(),sort() - Template literals for dynamic HTML generation
- CSS class manipulation for visual feedback
- Local state management patterns
Want to enhance this music player?
- Fork the repo 🍴
- Add your features (lyrics display, equalizer, themes, etc.) ✍️
- Submit a Pull Request ✅
This project is open-source under the MIT License.
⭐ If you enjoy this music player, don't forget to give it a star! ⭐ Happy listening! 🎧