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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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 theindex.js
file.Let me know about anything that you want more explanation about.
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.
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.
Thank you very much, sir.
Don't call me sir. We are all together in this.
Haha
@surajondev
can you share the link to code sandbox?
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.
Awesome that you like it. Feel free add more features to it.
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.
Glad that it help you 🔥
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?
I think there is missing of this code:
This code snippet is here but it keeps pointing out this error
You should remove the useEffect
thank you so much now it's run, very nice project
Awesome 🌟, I will be trying to add the favorite adding feature further
That's looks cool 🔥 if possible share the code snippet here for others
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!!
Thanks for your word
Looks amazing, I'll try this
Great. Add more features to it as per your requirement.
awesome
Thanks⚡
Awesome
Thanks 👍
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?I previously used
track
andtrack-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.
Check this one out github.com/champi-dev/react-playli...
What other features are looking to add it?
How to add some DEBOUNCE to the slider ?
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.
Glad that you like it⚡
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?
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..
Enjoy this article, you did a great job
How can i add Autoplay feature, like whenever i open component, songs play automatically?
Merci beaucoup pour le tuto très bien expliqué