Skip to content

acheronx0577/JavaScript-Building-a-Music-Player

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎵 Modern Music Player 🎧

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.


🎓 Certification

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.


📸 Player Preview

image

Live Demo: https://acheronx0577.github.io/JavaScript-Building-a-Music-Player


🎶 Features

  1. 🎵 Full Music Playback

    • Play, pause, next, previous controls
    • Real-time progress bar with seek functionality
    • Volume control slider
  2. 📋 Playlist Management

    • 10 pre-loaded songs by Quincy Larson
    • Add/remove songs from playlist
    • Shuffle functionality for random playback
    • Search through your playlist
  3. 🎨 Modern UI/UX

    • Responsive design for all devices
    • Smooth animations and hover effects
    • Current song highlighting
    • Progress tracking with time display
  4. ⌨️ Keyboard Shortcuts

    • Spacebar - Play/Pause
    • Arrow Right - Next song
    • Arrow Left - Previous song

🎮 How to Use

Basic Controls:

  • ▶️ 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

Playlist Actions:

  • 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

🧰 Installation & Usage

1️⃣ Clone this repo

git clone git@github.com:acheronx0577/JavaScript-Building-a-Music-Player.git

2️⃣ Open the project folder

cd JavaScript-Building-a-Music-Player

3️⃣ Run the file

Just open index.html in your favorite browser 🌐 and start playing!


🎵 Song Library

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)

🎯 Key JavaScript Concepts

  • Audio() object and its methods
  • addEventListener for 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

🤝 Contributing

Want to enhance this music player?

  • Fork the repo 🍴
  • Add your features (lyrics display, equalizer, themes, etc.) ✍️
  • Submit a Pull Request ✅

📜 License

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! 🎧

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published