Build: Custom Audio Player from scratch using React js?

In this build i will be building custom audio player from scratch using React js so without wasting lets dive deep into it.

Steps :

1. [ ] Create a empty git repository

Heroku link to project

soch-audio-player.herokuapp.com

Upload Mp3 here

mailboxdrive.com/home

1. [ ]Create a empty react project in local
2. Add .gitignore for react
3. remove boilder plate code
4. test in local
5. Commit builder plate changes

6. Push the latest changes

7. [ ]Create a empty project in heroku

8. Create a build pipeline for react develop branch
9. See live changes

1. [ ]Start with the project implmentation
2. [ x ] basic HTML and basic structure
3. [ x ] Styles
4. [ x ] Controls
5. [ ] Play pause music and next and prev
6. [ ] Make music scrolling.
7. [ ] Add a sound bar to increase and decrease sound

Future Upgrades : -

1. We can like a song and it will be added to liked song list
2. Show lyrics of the song , so if some people can't hear they can read the complete podcast that will be fun for them right.

Follow this for any Query

dev.to/ma5ly/lets-make-a-little-audio-playe..

Website to download MP3

musicdownload.zone/en1/download?type=mp3&am..

Website to upload the mp3 and get the link

mailboxdrive.com/home

Lets Get Started Building

• HTMLAudioElement

-useRef

• Audio Class

• CSS variable

• Transition
• box shadow working : box-shadow: 0 28px 28px rgba(0, 0, 0, 0.2);
• z-index : 1