https://github.com/hercules-peters/music-player-using-html-css-js
Deep Music Player is a simple, interactive web-based music player that allows users to play, pause, and navigate through their favorite tracks.
https://github.com/hercules-peters/music-player-using-html-css-js
html-css-javascript tiinyhost
Last synced: 3 months ago
JSON representation
Deep Music Player is a simple, interactive web-based music player that allows users to play, pause, and navigate through their favorite tracks.
- Host: GitHub
- URL: https://github.com/hercules-peters/music-player-using-html-css-js
- Owner: Hercules-Peters
- Created: 2025-02-13T22:03:41.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-13T22:15:50.000Z (4 months ago)
- Last Synced: 2025-02-13T22:35:13.267Z (4 months ago)
- Topics: html-css-javascript, tiinyhost
- Language: JavaScript
- Homepage: https://deepmusic.tiiny.site
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
## 🎵 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](https://deepmusic.tiiny.site)
---
### 📸 Screenshot
---
## ✨ 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:
```js
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:
```sh
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**.
---