A modern, fully-featured web-based music player with mood-based playlists, search functionality, and a beautiful dark/light theme interface. Built with vanilla JavaScript, HTML5, and CSS3.
MUZIX is a sleek, responsive web music player that provides a Spotify-like experience. It features mood-based playlist organization, real-time audio controls, and an elegant interface with animated card effects. Perfect for personal music collections or as a learning project for web development.
Keywords: music player, web audio player, HTML5 audio, responsive design, mood playlists, JavaScript audio, dark mode, CSS animations, web music app, audio streaming
- 🎨 Dark/Light Theme Toggle - Switch between themes for comfortable listening
- 🎵 Multiple Playlists - 7 mood-based playlists (Angry, Bright, Chill, Funky, Love, NCS, Uplifting)
- 🔍 Search Functionality - Quickly find albums by title or description
- ⌨️ Keyboard Controls - Space to play/pause, Arrow keys for next/previous track
- 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile
- 🎚️ Full Audio Controls - Play, pause, next, previous, seek, volume control
- 🖼️ Album Art Display - Beautiful cover images for each playlist
- 📝 Song Credits - Proper attribution with download and watch links
- 🎯 Progress Bar - Visual seekbar with time display
- ✨ Animated Cards - Rotating gradient border animations
- 🌐 SEO Optimized - Meta tags and Open Graph support
- HTML5 - Semantic markup and audio element
- CSS3 - Custom properties, animations, flexbox, grid
- JavaScript (ES6+) - Async/await, fetch API, DOM manipulation
- JSON - Data storage for songs and playlists
- SVG - Scalable vector icons
- Web Audio API - HTML5 audio playback
- A web server (Apache, Nginx) or static hosting service (Vercel, Netlify, GitHub Pages)
- Modern web browser with HTML5 audio support
- Basic knowledge of JSON for managing playlists
music-player/
├── index.html # Main HTML file
├── style.css # Styling
├── script.js # Main JavaScript logic
├── img/ # UI icons (play, pause, volume, etc.)
│ ├── play.svg
│ ├── pause.svg
│ ├── volume.svg
│ └── mute.svg
└── songs/ # Music library
├── ncs/
│ ├── songs.json # Song metadata
│ ├── info.json # Album information
│ ├── cover.jpg # Album artwork
│ ├── Cradles.mp3
│ └── Mortals.mp3
├── Angry_(mood)/
│ ├── songs.json
│ ├── info.json
│ └── cover.jpg
└── ... (other playlists)
-
Clone the repository
git clone https://github.com/Dhruv-Raichand/music-player.git cd music-player -
Add SEO Meta Tags (Optional but recommended)
- Add the meta tags from
meta-tags.htmlto yourindex.html<head>section - Update URLs and author information
- Add a
manifest.jsonfile for PWA support
- Add the meta tags from
-
Start a local server
# Using Python 3 python -m http.server 8000 # Using PHP php -S localhost:8000 # Using Node.js http-server npx http-server -p 8000
-
Open in browser
http://localhost:8000
-
Install Vercel CLI
npm i -g vercel
-
Deploy
vercel
-
Note: Vercel has file size limits. For MP3 files, consider using external storage (see Troubleshooting section).
- Drag and drop your project folder to Netlify Drop
- Or use Netlify CLI:
npm install netlify-cli -g netlify deploy
-
Create a folder in
/songs/directory:/songs/YourPlaylist/ -
Add
info.json:{ "title": "Your Playlist Name", "description": "Playlist description" } -
Add
songs.json:[ { "name": "Song Title", "artist": "Artist Name", "file": "song-file.mp3", "watch": "https://youtube.com/watch?v=...", "download": "https://download-link.com", "credit": "Song: Artist - Title [Release Info]" } ] -
Add files:
- Place MP3 files in the folder
- Add
cover.jpg(recommended: 300x300px)
-
Update script.js: Add your playlist to the albums array (around line 116):
{folder: 'YourPlaylist', title: 'Your Playlist Name', description: 'Description'}
To dynamically load all albums, create this file in the root:
[
{"folder": "ncs", "title": "NCS Songs", "description": "Songs for you"},
{"folder": "YourPlaylist", "title": "Your Playlist", "description": "Description"}
]| Key | Action |
|---|---|
Space |
Play / Pause |
→ (Right Arrow) |
Next track |
← (Left Arrow) |
Previous track |
Edit style.css to customize colors:
:root {
--primary-color: #your-color;
--background: #your-background;
}The player controls are in index.html. You can add more buttons or features by:
- Adding HTML elements
- Creating event listeners in
script.js - Styling in
style.css
Problem: Vercel has file size limits and may not deploy large MP3 files.
Solutions:
-
Use external hosting for MP3 files:
- Upload MP3s to Cloudinary, AWS S3, or Google Cloud Storage
- Update
playMusic()function inscript.js:currentSong.src = `https://your-cdn.com/${currFolder}/${track}`;
-
Use Netlify instead - Better for hosting media files
-
Compress MP3 files to reduce size
- Check browser console (F12) for errors
- Verify
songs.jsonformat is correct - Ensure file paths match exactly (case-sensitive)
- Check that MP3 files are in the correct folders
This is expected behavior - the theme resets on page reload. To persist theme:
- Use a backend to store preferences
- Or uncomment the localStorage code (note: may not work in all hosting environments)
Contributions are welcome! Here's how:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- NCS Music - NoCopyrightSounds for royalty-free music
- Icons - SVG icons for player controls
- Fonts - [Your font source]
GitHub: @Dhruv-Raichand
Email: dhruvraichand70@gmail.com
LinkedIn: Dhruv Raichand
Project Link: https://github.com/Dhruv-Raichand/music-player
Live Demo: https://music-player-six-taupe.vercel.app
⭐ Star this repo if you found it helpful!
- Playlist creation and management
- Shuffle and repeat modes
- Lyrics display
- Audio visualizer
- Social sharing features
- User accounts and favorites
- Queue management
- Equalizer controls