React Focus Music Player

This time I try to make a mini version of Spotify-like clone from scratch, with React and the native HTML5 audio element to play music without any library, best music to stay productive at work.

Demo

Live URL: https://react-focus-music-player.netlify.com/

The music player template designed and shared by Tzu-Luen Zoey Hsueh
All audio tracks are from numerous amazing artists in YouTube Audio Library without paying a dime.

What I learned from this project

• HTML5 <audio> element
• timeupdate event and React lifecycle methods
• Setting the audio source dynamically
• Play, pause, previous, next, shuffle, repeat tracks
• Adjusting volume
• Calculating mouse position on progress bar with buffered, currentTime and duration
• Clicking the progress bar to move to a different time
• Display advertisement every 3 songs
• CSS grid layout

Installation

1. Clone this repo
2. Run npm install

Development

1. npm start: Run the app in development mode.
2. npm run build: Builds the app for production to the build folder.