EchoPlay is a sleek and responsive web-based music player that lets users play songs, manage playlists, and control audio playback — all in the browser. It mimics the feel of real-world streaming platforms and includes interactive custom controls.
- 🎵 Custom Playlist Playback
- ⏭️ Next/Previous Track Navigation
- 🔊 Volume Control
- 🕒 Seek Bar to jump to any part of a song
- ⏯️ Custom Controls — Play, Pause, Next, Previous
- 💡 Smooth and intuitive UI
- HTML — Markup structure
- CSS — Responsive styling & layout
- JavaScript — Playback logic, playlist control, and interactivity
- GitHub — Version control and deployment-ready repo
🔗 Live Demo: https://project-echoplay.vercel.app/
EchoPlay/ ├── .git/ # Git version control ├── ArtistImg/ # Artist profile images (JPEG/WEBP) │ ├── Arijit Singh.jpeg │ ├── APDhillon.jpeg │ ├── ... # (Eminem, The Weeknd, Taylor Swift, etc.) │ ├── Assets/ # SVG icons and logo │ ├── EchoPlay Logo.png │ ├── play.svg │ ├── pause.svg │ ├── nextsong.svg │ ├── volume.svg │ └── ... (close.svg, playlist.svg, etc.) │ ├── Songsjson/ │ └── songs.json # Metadata for songs (title, artist, path, etc.) │ ├── Songssss/ # Actual music files (.mp3) │ ├── Afsos - AP Dhillon.mp3 │ ├── Drag Me Down - One Direction.mp3 │ ├── Water - Diljit Dosanjh.mp3 │ ├── ... # Full song list (75+ tracks) │ ├── index.html # Main HTML structure ├── script.js # JS logic for music handling ├── style.css # Component styling ├── utility.css # Utility & helper classes └── README.md # Project documentation
While building EchoPlay, I deepened my understanding of:
- JavaScript DOM manipulation and event handling
- Managing user interaction with media controls
- Building responsive, component-like UI without frameworks
Contributions are welcome!
If you have suggestions or want to extend the project, feel free to fork and raise a PR.
Built with ❤️ by Harsh Jagtap
Feel free to connect or share feedback!