Building a Music Player in React

Read Time:5 Minute, 12 Second

Whoever is learning React and wants to build a project with React. There are a variety of blogs and articles to guide a such projects for developers. I do go through those articles but one kind of project is always missing in them. The missing projects are the music player and video player. Both of the projects will give you the opportunity to handle audio and video. You will learn many things such as handling audio for playing and pausing audio.

Today, we are going to build a music player in React. We will look into the following topics:

  • Setting up the environment
  • Playing/Pausing audio
  • Handling time of audio(In term of current time and complete duration of audio)
  • Adding a range slider for the timeline of audio

After completing the project, our music player will look like this.

If this excites you then let’s get started.

I assume that you have knowledge about the following technologies as prerequisite:

  • JavaScript
  • HTML/CSS
  • Basic React

The environment setup is easy. You should have node.js pre-installed for running the node related command in the terminal.

Navigate to the directory in which you want to create the project. Now, run the terminal and enter the below command to install react project.

Enter fullscreen mode Exit fullscreen mode

Remove all the boilerplate and unnecessary code. We are now good to go.

We need to install the following libraries to our project:

  • use-sound: This will handle the audio file. It will load, play, and pause the audio along with other features.

Install with the below command:

Enter fullscreen mode Exit fullscreen mode
  • react-icons: For adding icons of play, pause, next and previous into our player.

Install it with the below command:

Enter fullscreen mode Exit fullscreen mode

Create a component directory in the src folder. Inside that create a component with the name Player.js. This component will be our music player.

Imports

As per the library to import in the file. You can look at it here:

Enter fullscreen mode Exit fullscreen mode

You can look into comments for the explanation of the imports.

Playing and Pausing the audio

Let’s implement the mandatory feature of the player which is playing and pausing the audio.

At the top, we have a isPlaying state for storing the current status of the player. This will be helpful in conditional rendering the play/pause icon according the status of the player.

Enter fullscreen mode Exit fullscreen mode

We need to initialize the useSound with audio. It will return the play, pause, duration, and sound method.

Enter fullscreen mode Exit fullscreen mode

play and pause is for playing and pausing the audio. duration is for the length of the track in milliseconds. sound will provide us with the howler.js method for the sound.

Create a function for handling the play and pause buttons. Here is the code for it.

Enter fullscreen mode Exit fullscreen mode

Now, it’s time to add the UI component of the player into the return. Here is the code for it.

Enter fullscreen mode Exit fullscreen mode

For the cover image, I have used the Loren Picsum for generating a random image.

You can look here for the CSS of the file:

Enter fullscreen mode Exit fullscreen mode

Run the react server. If everything goes well you will be able to see the below screen.

Screenshot - React Music Player

Click on the play button to play the audio.

Adding audio timeline with the current time and duration of the audio

Now, let’s add the timeline to the player. The timeline will controllable by the user. Any changes to it will change the audio’s current position.

Let’s look into the state that we are using. You see the comments for an explanation of each state.

Enter fullscreen mode Exit fullscreen mode

We are grabbing the duration props from the useSound. As the duration is provided in milliseconds, we have converted it into minutes and seconds.

Enter fullscreen mode Exit fullscreen mode

Now, for the current position of the audio, we have the sound.seek([]) method. We are running this function every second to change the current position of the audio. After getting the position of the audio which is in seconds. We are converting it into minutes and seconds. After converting, we are setting the state with the current value. Here is the code for it.

Enter fullscreen mode Exit fullscreen mode

Now for the return. Here is the code.

Enter fullscreen mode Exit fullscreen mode

The value of the range input is the second state. It will provide us with the current position of the audio. On change in the range by the user. We are calling the soud.seek() method to change the current position of the audio.

After successfully completing the project, you will be able to see the below output.

Note: The music is coming into my speaker.

I have created a codesandbox. You can look at it for the complete project with code and the output.

Note: The song that I used is Rubaaiyaan from Qala. All credit to the creator.

You can work on the music player to add more features such as:

  • It currently plays one song and loads many songs into it. Use the next and the previous icons for changing audio.
  • Change the name and album of the audio as per the song.
  • Add more features that you wish a music player should have.

We have created our own music player. This project will help you in handling audio files in React. We have added features of play and pause with the function. Also added an audio timeline with the range input. Users can change the current position of the audio with the timeline. Feel free to add more features to the project.

I hope this project has helped you in understanding a method of handling music in React. Let me know in the comment if you want a video player tutorial too. Thanks for reading the blog post.

Source: https://dev.to/documatic/building-a-music-player-in-react-2aa4

CyberSEO Pro - OpenAI GPT-3 autoblogging and content curation plugin for WordPress