DEV Community

Cover image for Building a Music Player in React

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...
Collapse
 
uchennamani4 profile image
Maazi Uche Nnamani

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.

Collapse
 
surajondev profile image
Suraj Vishwakarma

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.

Collapse
 
uchennamani4 profile image
Maazi Uche Nnamani

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?

  1. Where was the music downloaded from?

  2. 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.

Thread Thread
 
surajondev profile image
Suraj Vishwakarma
  1. 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.

  2. 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.

Thread Thread
 
uchennamani4 profile image
Maazi Uche Nnamani

Thank you very much, sir.

Thread Thread
 
surajondev profile image
Suraj Vishwakarma

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

Thread Thread
 
uchennamani4 profile image
Maazi Uche Nnamani

Haha

Collapse
 
keval_kapadia_b6d1f069852 profile image
Keval Kapadia

@surajondev
can you share the link to code sandbox?

Collapse
 
fu91t1v3 profile image
⚡Abiola⚡

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.

Collapse
 
surajondev profile image
Suraj Vishwakarma

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

Collapse
 
waterproofwebwizard profile image
Dennis Hüttner

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.

Collapse
 
surajondev profile image
Suraj Vishwakarma

Glad that it help you 🔥

Collapse
 
katielly profile image
Katielly Reis

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?

Collapse
 
surajondev profile image
Suraj Vishwakarma

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
  };
Enter fullscreen mode Exit fullscreen mode
Collapse
 
katielly profile image
Katielly Reis

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

Image description

Image description

Thread Thread
 
thiendz2611 profile image
thiendz2611

Image description

Thread Thread
 
thiendz2611 profile image
thiendz2611

You should remove the useEffect

Thread Thread
 
katielly profile image
Katielly Reis • Edited

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

Collapse
 
siddharthsing profile image
Siddharth Singh Baghel

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

Collapse
 
surajondev profile image
Suraj Vishwakarma

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

Collapse
 
chandrashekhar profile image
Chandrashekhar Mehta

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!!

Collapse
 
surajondev profile image
Suraj Vishwakarma

Thanks for your word

Collapse
 
pavanbelagatti profile image
Pavan Belagatti

Looks amazing, I'll try this

Collapse
 
surajondev profile image
Suraj Vishwakarma

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

Collapse
 
3r4y profile image
Eray

awesome

Collapse
 
surajondev profile image
Suraj Vishwakarma

Thanks⚡

Collapse
 
gbadamson profile image
Gbadamson

Awesome

Collapse
 
surajondev profile image
Suraj Vishwakarma

Thanks 👍

Collapse
 
jacobdchamberlain profile image
Jacob D. Chamberlain • 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?

Collapse
 
surajondev profile image
Suraj Vishwakarma

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.

Collapse
 
champi profile image
Champi
Collapse
 
surajondev profile image
Suraj Vishwakarma

What other features are looking to add it?

Collapse
 
bosearitra2003 profile image
Aritra Bose

How to add some DEBOUNCE to the slider ?

Collapse
 
djbowen95 profile image
Daniel Bowen

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.

Collapse
 
surajondev profile image
Suraj Vishwakarma

Glad that you like it⚡

Collapse
 
brunokristo profile image
Bruno Kristo • 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?

Collapse
 
vishnusoni profile image
Vishnu Soni

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..

Collapse
 
merc_opolo profile image
Merc Opolo

Enjoy this article, you did a great job

Collapse
 
nishantchaudhary5338 profile image
Nishant-Chaudhary5338

How can i add Autoplay feature, like whenever i open component, songs play automatically?

Collapse
 
kajan profile image
Muthulingam

Merci beaucoup pour le tuto très bien expliqué