https://github.com/pvm-harshavardhan/music-player
A modern, responsive music player🎵 with glassmorphism UI. Features audio controls, playlist management, keyboard shortcuts, and file upload.
https://github.com/pvm-harshavardhan/music-player
bootstrap css3 es6 fontawesome git github github-pages glassmorphism html5 javascritpt musci-player
Last synced: 4 months ago
JSON representation
A modern, responsive music player🎵 with glassmorphism UI. Features audio controls, playlist management, keyboard shortcuts, and file upload.
- Host: GitHub
- URL: https://github.com/pvm-harshavardhan/music-player
- Owner: pvm-harshavardhan
- License: mit
- Created: 2025-06-25T11:34:20.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-06-26T01:02:46.000Z (4 months ago)
- Last Synced: 2025-06-26T01:34:17.213Z (4 months ago)
- Topics: bootstrap, css3, es6, fontawesome, git, github, github-pages, glassmorphism, html5, javascritpt, musci-player
- Language: JavaScript
- Homepage: https://pvm-harshavardhan.github.io/music-player/
- Size: 9.12 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎵 Beautiful Music Player
A modern, responsive music player built with HTML, CSS, JavaScript, and Bootstrap. Features a beautiful glassmorphism UI with smooth animations and full audio control functionality.
> 🌐 **Live Demo:** [View the Music Player App](https://pvm-harshavardhan.github.io/music-player/)
[](LICENSE)
[](https://developer.mozilla.org/en-US/docs/Web/HTML)
[](https://developer.mozilla.org/en-US/docs/Web/CSS)
[](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[](https://getbootstrap.com/)
[](https://getbootstrap.com/)
[](https://git-scm.com/)
[](https://github.com/)
[](https://pages.github.com/)
---
## ✨ Features
- **🎨 Modern Design**: Beautiful gradient background with glassmorphism effects
- **🎵 Full Audio Controls**: Play, pause, skip, volume control
- **📱 Responsive**: Works perfectly on desktop, tablet, and mobile devices
- **⌨️ Keyboard Shortcuts**: Space (play/pause), Arrow keys (navigation & volume)
- **🎯 Interactive Progress Bar**: Click to seek through songs
- **📋 Playlist Management**: Easy song selection from playlist
- **🔄 Auto-play Next**: Automatically plays next song when current ends
- **🎨 Visual Effects**: Album art rotation, hover effects, and smooth animations
- **📁 File Upload**: Add your own audio files directly through the interface
## 🎮 Usage Guide
### Basic Controls
#### **Mouse Controls**
- **Play/Pause**: Click the center button
- **Previous/Next**: Use the arrow buttons
- **Volume**: Drag the volume slider
- **Seek**: Click on the progress bar
- **Playlist**: Click any song in the playlist
#### **Keyboard Shortcuts**
| Key | Action |
|-----|--------|
| `Space` | Play/Pause |
| `←` | Previous song |
| `→` | Next song |
| `↑` | Increase volume |
| `↓` | Decrease volume |
| `Ctrl + ←` | Volume 0 (mute) |
| `Ctrl + →` | Volume 100 (max) |
### Adding Music
#### **Method 1: File Upload**
1. Click "Add Audio Files" button
2. Select your audio files
3. Files are automatically added to playlist
#### **Method 2: Manual Setup**
1. Place audio files in `audio/` folder
2. Update `script.js` with song information:
```javascript
{
title: "Your Song Title",
artist: "Your Artist Name",
src: "audio/your-song.mp3",
duration: "0:00", // Auto-detected
albumArt: "images/your-album.jpg" // Optional
}
```
## 🔧 Tech Stack
### **Technologies Used**
- **HTML5**: Semantic markup with Bootstrap 5
- **CSS3**: Modern styling with animations and responsive design
- **JavaScript ES6+**: Class-based architecture with event handling
- **Bootstrap 5**: Responsive grid system and components
- **Font Awesome**: Beautiful icons throughout the interface
- **Git** – Version control
- **GitHub** – Code hosting and collaboration
- **GitHub Pages** – Static webPage Hosting
## 🛠️ Getting Started
1. **Clone the repository:**
```bash
git clone https://github.com/pvm-harshavardhan/music-player.git
```
2. **Change to the project directory:**
```bash
cd music-player
```
3. **Open the app:**
- Open `index.html` in your web browser.
4. **Enjoy your music!** 🎉
## 📁 Project Structure
```
music-player/
├── 📄 index.html # Main HTML structure
├── 🎨 styles.css # CSS styling and animations
├── ⚡ script.js # JavaScript functionality
├── 📁 audio/ # Audio files directory
└──📁 images/ # Album art directory
```
## 📱 Browser Compatibility
- ✅ Chrome (recommended)
- ✅ Firefox
- ✅ Safari
- ✅ Edge
- ⚠️ Internet Explorer (limited support)
## 🐛 Troubleshooting
### **Audio Not Playing?**
1. Check if audio files are in the correct location
2. Ensure audio files are not corrupted
3. Check browser console for errors
4. Verify file paths in the JavaScript code
### **Styling Issues?**
1. Make sure all CSS files are loaded
2. Check if Bootstrap CDN is accessible
3. Clear browser cache
### **Mobile Issues?**
1. The player is fully responsive
2. Touch controls work on mobile devices
3. Audio autoplay may be restricted on mobile (user interaction required)
## 📄 License
This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
## 📞 Contact
Your Name - [@pvm_harsha](https://x.com/pvm_harsha)
Project Link: [Music Player Web App Project](https://github.com/pvm-harshavardhan/music-player)
---
**Made with ❤️ by P VM Harsha**
**Enjoy your music! 🎵🎉✨**