Musify - Music Player

A beautiful pastel-themed music player with modern features and an intuitive interface.

Features

Playback Controls

• Play/Pause/Previous/Next track navigation
• Progress bar with seek functionality (click to jump)
• Real-time time display (current/duration)
• Volume control slider with mute option
• Auto-play next song in playlist

Playlist Management

• Drag and drop multiple audio files
• Click to browse and add songs
• Visual playlist sidebar with song list
• Save playlists for later use
• Load previously saved playlists
• Delete individual songs from playlist
• Click any song to play it instantly

Keyboard Shortcuts

• Space - Play/Pause
• Arrow Right - Next track
• Arrow Left - Previous track
• Arrow Up - Increase volume
• Arrow Down - Decrease volume
• N - Next track
• P - Previous track

Visual Features

• Pastel pink and purple color scheme
• Dynamic background images that change with songs
• Dynamic cover images (10 different covers cycle through songs)
• Smooth animations and transitions
• Responsive design
• Custom styled scrollbars

Two Versions Available

1. Browser Version (Ready to Use!)

File: index.html

How to run:

• Simply open index.html in any modern web browser
• Or double-click the file to open it in your default browser

Features:

• No installation required
• Works immediately
• Drag & drop audio files or click to browse
• Supports multiple audio formats (MP3, WAV, OGG, etc.)

2. Desktop Electron Version (Requires Node.js)

Files: Musicplayer.html, main.js, preload.js

Requirements:

• Node.js and npm must be installed

How to run:

1. Install Node.js from https://nodejs.org/
2. Open terminal in the musicplayer folder
3. Run: npm install
4. Run: npm start

Usage

1. Start the Player: Open index.html in your browser (recommended)
2. Add Music:
   • Drag and drop audio files onto the player, OR
   • Click anywhere on the player to browse files
   • Add multiple files at once
3. Control Playback:
   • Use ⏮ ▶ ⏭ buttons to control playback
   • Click progress bar to seek
   • Adjust volume with slider
   • Use keyboard shortcuts for quick control
4. Manage Playlist:
   • View all songs in the sidebar
   • Click any song to play it
   • Delete songs with the × button
   • Save playlists with button
   • Load saved playlists with button
   • Clear all with button
5. Enjoy: Songs auto-play in sequence with changing backgrounds!

Files Structure

musicplayer/
├── index.html              # Browser version (recommended)
├── Musicplayer.html        # Electron version HTML
├── script-browser.js       # Browser version JavaScript
├── script.js               # Electron version JavaScript
├── style.css               # Shared styling (pastel theme)
├── main.js                 # Electron main process
├── preload.js              # Electron preload script
├── package.json            # Node.js dependencies
├── Assets/
│   ├── images/             # Cover images and backgrounds
│   └── Songs/              # Sample music files (optional)
├── README.md               # This file
└── .gitignore              # Git ignore file

Technologies Used

• HTML5: Structure and Audio API
• CSS3: Styling with gradients, animations, and flexbox
• Vanilla JavaScript: No frameworks, pure JS
• File API: Drag-and-drop and file handling
• localStorage: Save playlist metadata
• IndexedDB: (Future) Store audio files persistently
• Electron (optional): Desktop application wrapper

Browser Compatibility

Works in all modern browsers:

• Chrome/Edge (recommended)
• Firefox
• Safari
• Opera

Future Enhancements

• Complete IndexedDB integration for persistent audio storage
• Shuffle and repeat modes
• Equalizer controls
• Search/filter songs
• Multiple playlist management
• Song metadata display (artist, album)

Contributing

This is a learning/portfolio project. Feel free to fork and customize!

License

MIT License - feel free to use and modify!

---

Enjoy your music!