12/06: Can user add the queue any video or select any video from playlist list, queue mean run after this video end.
Sleep Timer feature: 12/09 Add a 0 starting on the minute second: 12/09 Move Volume range and speed to the new file
This is a full music player built from scratch using only JavaScript, HTML, and CSS. No frameworks, no AI code, no tutorials — all logic manually designed and written.
The project plays 36 local audio files with a complete music control system, playlists, shortcuts, timers, and full state saving.
- 🎧 Core Music Controls
- Play / Pause
- Next / Previous
- Auto-play next song
- Dynamic play/pause button change
- Accurate current time & total time display
- Resume music from the exact time and exact song after refresh
🎚️ Speed & Volume
Speed control: 0.25x → 3.0x
Volume slider with drag
Smooth UI with real-time updates
📜 Song List Table
Full table of all songs
Click any song to play
Scrollable and easy to use
📂 Playlists & Queue System
Separate playlist section on left side
Click any playlist item to play
Add songs to queue
Queue plays automatically after current song finishes
🔖 Bookmarks
Bookmark any song
Save bookmarks to LocalStorage Highlight bookmarked songs
🔍 Search
Search any song by name
Click a search result to play instantly
⌨️ Keyboard Shortcuts
More than 10 shortcuts, including:
Play / Pause
Next / Previous
Volume up/down
Speed up/down
Show shortcut list: Ctrl + ?
Close shortcut list
Sleep timer controls
Shortcut list opens as a floating card and closes automatically or by shortcut.
Loading State:
- Also add teh loading state till our content is not loaded.
⏱️ Sleep Timer
Predefined timers: 1, 5, 10, 30 minutes, and 1 hour
Custom timer
Music stops automatically when timer expires
💾 LocalStorage Integration
Save last played song
Save last time position
Save bookmarks
Save user preferences
Auto-load everything when the page is opened again
📊 User Stats Display play count in UI
🛠️ Tech Stack
HTML
CSS
JavaScript (Vanilla JS) No React, no libraries, no frameworks.
🎯 Why This Project Is Special
Built 100% manually with own logic
No AI help in coding
No copy-paste
Learned from MDN and StackOverflow only
Pure DOM manipulation
Real-time event handling
Multi-system architecture: audio, playlist, queue, storage, shortcuts, timers
This shows strong JavaScript skills and real problem-solving ability.
📸 Screenshots (add when ready)
Music Table
Playlist UI
Bookmark List
Shortcut Card
Sleep Timer UI
🚀 How to Run
Just Open Browser,
📌 Future Plans
I am not adding new features; the project is complete.
📄 License
This is an open project. You can use the idea or improve it.