DEV Community

Building a Music Player in React

Suraj Vishwakarma on December 16, 2022

Introduction Whoever is learning React and wants to build a project with React. There are a variety of blogs and articles to guide a suc...

Read full post

Maazi Uche Nnamani • Dec 18 '22

Nice write-up. Could you explain the broiler plates to be removed? Could you also indicate if the Player.js component should has a CSS file for styling. I became lost midway as some of the steps appeared confusing to a person that started learning React recently.

Great article all the same.

Suraj Vishwakarma • Dec 18 '22

You can look at the codesanbox for the code that we are required. You can keep that much and remove other files and code. As for the styling, we have used styles.css for codesanbox. It is being imported into the index.js file.

Let me know about anything that you want more explanation about.

Maazi Uche Nnamani • Dec 18 '22

Thank you very much.

Like I said, some of the steps might not be easy for a person learning React newly.

Here are my questions?

Where was the music downloaded from?
I saw that you used the following line ' import qala from "../assets/qala.mp3" ' Is this music available for download?

Perhaps, I'm not smart enough to understand this. Could please appear as if you are explaining the steps to a-5 year old?

Thanks in advance.

Suraj Vishwakarma • Dec 18 '22

You can use any music for it. I have used a Hindi film song which is not available free for commercial uses. I used it for educational purposes. I like that song. I used any YouTube video to MP3 converter to get the audio.
The source is the directory in which I have added the audio. As I said, you can use the music at individual level and educational purposes but will not recommended for any other uses of the song.

Everyone starts form zero. Even today, I get confused sometimes. Leaning is life long process. So, go for it and make as you want.

Maazi Uche Nnamani • Dec 18 '22

Thank you very much, sir.

Suraj Vishwakarma • Dec 18 '22

Don't call me sir. We are all together in this.

Maazi Uche Nnamani • Dec 18 '22

Haha

Dennis Hüttner • Dec 19 '22

I find the article very helpful and detailed. It's good to see that topics like creating a music player in React are also covered, as these types of projects are often missing in tutorials. The article covers all the important aspects, from setting up the environment to adding buttons for playing and pausing audio. The explanations and code examples are detailed and easy to understand, so I feel like I could recreate the project myself. I look forward to being able to apply what I have learned to my own project. Thank you for sharing this article.

Suraj Vishwakarma • Dec 19 '22

Glad that it help you 🔥

⚡Abiola⚡ • Dec 18 '22

Thanks very much. This tutorial brought me back to dev.to after being absent for a long time. I'm also learning react, and this has always been one of my project.

I'm gonna try this, and also extend it beyond, by God's grace. Thanks.

Suraj Vishwakarma • Dec 18 '22

Awesome that you like it. Feel free add more features to it.

Katielly Reis • Apr 5 '23

Hello, I'm new to react and I'm trying to run this project but it gives an error with eslint [ Line 103:16: 'time' is not defined no-undef]. Can anyone help me?

Suraj Vishwakarma • Apr 5 '23

I think there is missing of this code:

useEffect(() => {
  const sec = duration / 1000;
  const min = Math.floor(sec / 60);
  const secRemain = Math.floor(sec % 60);
  const time = {
    min: min,
    sec: secRemain
  };

Katielly Reis • Apr 6 '23

This code snippet is here but it keeps pointing out this error

thiendz2611 • Apr 13 '23

You should remove the useEffect

Katielly Reis • Apr 18 '23 • Edited

thank you so much now it's run, very nice project

Jacob D. Chamberlain • Dec 19 '22 • Edited

There is CSS for something called "track" and "track-inner" - where are these located in the Player component?
Also, what is the second <p> tag with time.min and time.sec used for?

Suraj Vishwakarma • Dec 19 '22

I previously used track and track-inner to style the control button but remove them later. The CSS was from that part which I forgot to remove. Now, it's removed and thanks for it.

The second tim.min and time.sec is the complete duration of the audio in minutes and seconds respectively.

Siddharth Singh Baghel • Dec 16 '22

Awesome 🌟, I will be trying to add the favorite adding feature further

Suraj Vishwakarma • Dec 16 '22

That's looks cool 🔥 if possible share the code snippet here for others

Chandrashekhar Mehta • Dec 20 '22

It's a cool app and the documentation is amazing.
like each and every feature of the app is explained in such a simple way. Hats's off!!

Suraj Vishwakarma • Dec 20 '22

Thanks for your word

Pavan Belagatti • Dec 17 '22

Looks amazing, I'll try this

Suraj Vishwakarma • Dec 17 '22

Great. Add more features to it as per your requirement.

Champi • Dec 20 '22

Check this one out github.com/champi-dev/react-playli...

Eray • Dec 17 '22

awesome

Suraj Vishwakarma • Dec 17 '22

Thanks⚡

Gbadamson • Dec 18 '22

Awesome

Suraj Vishwakarma • Dec 18 '22

Thanks 👍

Suraj Vishwakarma • Dec 16 '22

What other features are looking to add it?

Aritra Bose • Jun 6 '23

How to add some DEBOUNCE to the slider ?

Daniel Bowen • Dec 16 '22

This looks cool! A bit different to other React projects. Only skim read it - but I think I'm going to give it a go over the next few days.

Suraj Vishwakarma • Dec 17 '22

Glad that you like it⚡

Bruno Kristo • Mar 22 • Edited

Thank you for your writing.
This is very helpful for me. I have followed from scratch and it works on my pc.
But I can't dynamically import music sources in Download folder.
Could you please explain about this too?

Vishnu Soni • Apr 10 '23

Bro really great tutorial, but I think so that album art and the name of the song are loaded manully. Can there be any sort of code that can get those things from the song itself. Like any music player app on the phone or in laptops can. No wonder if its an hard job just..