Skip to content

Deep Music Player is a simple, interactive web-based music player that allows users to play, pause, and navigate through their favorite tracks.

Notifications You must be signed in to change notification settings

Hercules-Peters/Music-Player-using-HTML-CSS-JS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 

Repository files navigation


🎵 Deep Music Player

Deep Music Player is a simple, interactive web-based music player that allows users to play, pause, and navigate through their favorite tracks. It features a sleek UI with track details, progress control, and volume adjustments.

🌐 Live Demo

Try it out here: Deep Music Player


📸 Screenshot

![Music Player UI](music app/assest/image/screenshot.jpg)


✨ Features

✔️ Play, pause, next, and previous track controls
✔️ Shuffle (random track selection)
✔️ Repeat track feature
✔️ Volume control with mute/unmute toggle
✔️ Dynamic background color changes
✔️ Displays current track details (name, artist, duration)


🎶 Example Songs Included

The player includes a few sample tracks by default:

1️⃣ Search & Rescue - Drake
2️⃣ Somewhere Only We Know - Rhianne (Cover)
3️⃣ So Much Pain Remix - Eminem & Halsey
4️⃣ Careless Whisper - Besomage (Magic Cover)

🚀 You can add your own songs! Just update the music_list array in script.js with new song details.


📂 Adding Your Own Songs

To add more music, follow these steps:

1️⃣ Place your MP3 files inside the assets/music/ folder.
2️⃣ Add an image (album art) inside assets/image/.
3️⃣ Open script.js and update the music_list array:

const music_list = [
    {
        img: 'assets/image/my_song.jpg',
        name: 'My New Song',
        artist: 'My Favorite Artist',
        music: 'assets/music/my_song.mp3'
    }
];

🚀 How to Run the Project

1️⃣ Download or clone this repository:

git clone https://github.com/your-username/deep-music-player.git

2️⃣ Open index.html in your browser.


🛠️ Technologies Used

  • HTML - Structure
  • CSS - Styling & Animations
  • JavaScript - Music player functionality
  • Font Awesome - Icons

💡 Contributing

Want to improve this project? Feel free to fork the repo, make changes, and submit a pull request! 🚀


📜 License

This project is open-source and available under the MIT License.


About

Deep Music Player is a simple, interactive web-based music player that allows users to play, pause, and navigate through their favorite tracks.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published