A professional, high-performance music library application built with React 18 and Vite. This player is designed to handle massive local music collections entirely within the browser, utilizing modern Web APIs for a native-feeling desktop experience.
- 10-Band Graphic EQ: Professional-grade audio control using ten
BiquadFilterNodepeaking filters to customize your sound profile. - LCD Visualizer: A real-time, frequency-domain visualizer rendered on a canvas via the Web Audio API.
- Synced Lyrics: Interactive, full-screen lyrics mode with support for
.lrcfile drag-and-drop and timestamp scrubbing. - Native Integration: Full support for OS Media Keys and global keyboard shortcuts (Play/Pause/Skip).
- Recursive Folder Scanning: Support for the modern File System Access API with persistent folder handles and a hybrid fallback for folder selection.
- List Virtualization: Powered by React-Virtuoso, ensuring a butter-smooth 60FPS UI even with libraries exceeding 10,000+ tracks.
- Fuzzy Search: Typo-tolerant, lightning-fast searching across titles, artists, and albums powered by Fuse.js[cite: 2].
- Queue Management: Advanced "Up Next" queue with native Drag & Drop reordering[cite: 1, 2].
- Custom Playlists: Create and curate your own collections with persistent storage[cite: 2].
- Dynamic Ambient Background: Real-time color extraction from album artwork creates a shifting, blurred "glow" effect that adapts to the current track[cite: 1, 2].
- Custom Context Menus: Sleek, Apple-style frosted glass right-click menus for advanced track actions[cite: 2].
- Persistent State: Your volume, EQ bands, and playlists are automatically saved via Zustand Persistence[cite: 1, 2].
| Category | Technology |
|---|---|
| Framework | React 18 + Vite[cite: 1, 2] |
| Styling | Tailwind CSS + Lucide Icons[cite: 1, 2] |
| State Management | Zustand + Persist Middleware[cite: 1, 2] |
| Audio Processing | Web Audio API (AudioContext)[cite: 1, 2] |
| Search & Performance | Fuse.js & React-Virtuoso[cite: 2] |
| Storage | IndexedDB & LocalStorage[cite: 1, 2] |
-
Clone the repository:
git clone [https://github.com/adityogi/music_project_5.git](https://github.com/adityogi/music_project_5.git) cd music_project_5 -
Install dependencies:
npm install fuse.js react-virtuoso lucide-react zustand
-
Start the development server:
npm run dev
-
Importing Music: Click "Open Folder" in the sidebar or simply drag a folder from your desktop anywhere onto the application window[cite: 1, 2].
-
Equalizer: Click the Sliders icon in the Player Bar to adjust the 10-band EQ[cite: 2].
-
Lyrics: Click the Microphone icon for the full-screen view. Drag a .lrc file onto the screen to sync lyrics for any local track[cite: 1, 2].
-
Context Menus: Right-click any track in the library to access "Play Next," "Add to End of Queue," or add it to a Playlist[cite: 2].
| Key | Action |
|---|---|
| Space | Play / Pause |
| Arrow Right | Skip to Next Track |
| Arrow Left | Previous Track[cite: 1] |
| L | Toggle Full-screen Lyrics[cite: 1, 2] |
| Q | Open / Close Queue Drawer[cite: 1, 2] |
[!IMPORTANT] Privacy First: This is a local-first application. All audio processing and library management happen on your machine. Your music files are never uploaded to any server[cite: 1, 2].