The Music Player App is a web-based application designed to provide users with a simple and intuitive interface for playing and managing a playlist of songs. The app includes essential features such as play, pause, skip, shuffle, and playlist management.
![music-player](https://private-user-images.githubusercontent.com/126704751/300466064-c43076f8-b37e-41eb-b74a-074f0f1caeb8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE4Mzk2MDgsIm5iZiI6MTcyMTgzOTMwOCwicGF0aCI6Ii8xMjY3MDQ3NTEvMzAwNDY2MDY0LWM0MzA3NmY4LWIzN2UtNDFlYi1iNzRhLTA3NGYwZjFjYWViOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyNFQxNjQxNDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xNDBhZGIwNTliYTUzOWEwY2M1OGI4ZmQ0ZmQwNTUxZTJjMDU3NWNlODgzM2FkMmEzMzA5YjY0ZjZlZGY0OTA1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.svc8gVplqQg4kRHBtFJPLvvLuOsKax3DrOPfoe55atc)
![music-player-media-query](https://private-user-images.githubusercontent.com/126704751/300466182-8185836b-3333-44ff-a515-463d44fad40d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE4Mzk2MDgsIm5iZiI6MTcyMTgzOTMwOCwicGF0aCI6Ii8xMjY3MDQ3NTEvMzAwNDY2MTgyLTgxODU4MzZiLTMzMzMtNDRmZi1hNTE1LTQ2M2Q0NGZhZDQwZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyNFQxNjQxNDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mYzU4YmU2ZTBjYmZjYmI0ZjVlYjkyYWM1YTljNjQ0ZWNhZDZjYmExOWVmZGE0MDBhOTNmNjllZmQ4ODlmZDllJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.PPwBLgRMRAZ4MBkz1RMXk7oV4ac18GNlzduphPb8NAc)
- Previous: Skip to the previous song.
- Play/Pause: Start or pause the current song.
- Next: Skip to the next song.
- Shuffle: Shuffle the playlist order for a dynamic listening experience.
- Delete Song: Remove unwanted songs from the playlist.
- Reset Playlist: Reset the playlist to the default set of songs.
-
Player Controls:
- Click the "Previous" button to skip to the previous song.
- Use the "Play/Pause" button to start or pause the current song.
- Click the "Next" button to skip to the next song.
- The "Shuffle" button rearranges the playlist for a randomized order.
-
Playlist Management:
- Each song in the playlist displays its title, artist, and duration.
- Click on a song to play it.
- Use the "Delete" button to remove a song from the playlist.
- The main screen shows the current song's title and artist.
- The playlist is displayed with options to play or delete each song.
- If the playlist is empty, a "Reset Playlist" button appears.
- Clicking this button restores the default playlist.
- The script (
script.js
) is well-organized with functions for each feature. - Event listeners are set up for player controls and playlist interactions.
Feel free to customize the playlist by adding or removing songs in the allSongs
array in script.js
.
const allSongs = [
{
id: 0,
title: "Your Song Title",
artist: "Artist Name",
duration: "4:00",
src: "https://your-audio-source-url.mp3",
},
// Add more songs as needed...
];
-
Clone the repository:
git clone https://github.com/Erikote04/Music-Player.git
-
Open index.html in your preferred web browser.
-
Start listening to music!