Preview
Preview the live demo:
Tools & Technologies
- React.js.
- Pure HTML5/CSS3.
Features
- Mobile Responsive.
- Play/Pause music button.
- Forward/Backward 10 seconds button.
- Previous/Next music button.
- Right arrow to go 10 seconds forward. Left arrow for 10 seconds Backward.
- Bottom arrow gets you to the next music.
- Space button allows you to switch between play/pause.
- Show upcoming music.
- Save the music you arrived at when you left off.
Project Overview
There are two versions of this App, one using just the props, and the other using Context API, There is no difference between the two I made the one with the props first, then refactor it with Context API.
If you arrived at certain music and you leave the website, when you come back again, you will stay in the last music you were in, thanks to local storage.
Note
You may experience some delay in playing music, due to music and photos hosted in a server located in the US, I will fix this issue when I have free time.