🎵 A sleek and user-friendly music app built with HTML, CSS, and vanilla JavaScript. Enjoy essential music features like play, pause, skip, and shuffle, along with playlist management, new song fetching, detailed song information, and customizable sorting options. Dive into a seamless music experience with intuitive controls and a clean interface.
🎵 A sleek and user-friendly music app built with HTML, CSS, and vanilla JavaScript. Enjoy essential music features like play, pause, skip, and shuffle, along with playlist management, new song fetching, detailed song information, and customizable sorting options. Dive into a seamless music experience with intuitive controls and a clean interface.
You can see the project in action by visiting the live demo.
Here are some key features of this app:
- 🎵 Play, pause, skip, and shuffle songs with ease.
- 📸 Dynamic song details including title, artist, duration, and album art.
- 📜 Interactive playlist functionality – play or remove songs with a click.
- 🎧 Explore different playlists and switch seamlessly between them.
- ⏱ Customize your playlist sorting by title or duration.
- 🔄 Progress bar for precise song navigation.
- 🎶 Add any song to your playlist effortlessly with just the name.
- HTML
- CSS
- JavaScript
- Clone the repository to your local machine using
git clone. - Navigate to the project directory.
- Open the
index.htmlfile in your preferred web browser.
- Use the play button to start playback, pause button to pause, and skip buttons to navigate between songs.
- Click the shuffle button to randomize the playlist order.
- Get a new playlist by clicking the "Get Playlist" button after selecting from options and songs of that playlist will be fetched.
- Remove songs from the playlist by clicking the "cross sign" button next to each song.
- Sort songs alphabetically by clicking the "Sort A-Z" button or "Sort Z-A" button.
- Sort songs by duration using the "Sort by Duration" button.
- Click the "Add song" button to add your favorite songs to the playlist by entering the song name in input field and clicking "Add".
- Use the progress bar to navigate to specific parts of a song by clicking on the desired position.
- Browse through the available playlists and discover new music genres by selecting different playlists from the dropdown menu
This project wouldn't be possible without the following:
- Manik Maity -[manikmaity010@gmail.com]
- My LinkedIn
Note: This project is for educational and demonstration purposes. All songs used in the project are belongs to its respective owner, I used it for educational purpose. It is not affiliated with or endorsed by anyone.