This player is developed using HTML, CSS and pure JavaScript (Vanilla JS). I tried to do the best practices and produce clean codes as much as I can. I think this project will be useful and informative for the junior and mid-level developers and also those who are learning JavaScript and want to have a better understanding of behind-the-scenes JavaScript. If you like, you can cooperate in developing this project and adding new features or refactoring codes.
Click here to watch the online demo
This is a minimal music player with the most useable features in the common players, contains:
- Shuffle Mode (On / Off)
- Previous Music
- Play / Pause
- Next Music
- Repeat Mode (Current Music / All Musics / Off)
- Time Progressbar: The player contains a progressbar that showing the progress of the music. By clicking on the different positions on it (in the horizontal axis), you can change the current time of the music.
- Larger Cover Images: Cover of each music is visible in the top of player. By clicking on the it, you can see a bigger size of it and by clicking on the big size cover, you back to the main view of player again.
- Favorite Musics: You can like a music and make it as favorite by clicking on the heart logo, bottom the music's artist and vice versa. These data will be saved in the localStorage of the browser.
- Reverse Time: By default, the current time shows the amount of time played by the music. by clicking on it, you can see how much time is left of the song and vice versa.