/React-Focus-Music-Player

A mini version of Spotify-like clone from scratch

Primary LanguageJavaScript

React Focus Music Player Netlify Status

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/

Focus Music Player in React 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.