Hello my gorgeous friend, ever wondered how music is being added in a react application? In this tutorial, you will learn how to implement an audio player in a react application.

What is an audio player
Adding Audio Player in React
Examples
Conclusion
Resources

What is an audio player

The audio player is a technology that allows you to listen to audio files such as Mp3 and Wav audio formats, the audio player we are going to look into in this tutorial is the web audio player, which allows you to add an audio player to your website for people to listen and dance to 😀.

Adding Audio Player in React

Audio players can be added or implemented in a react component using the HTML audio element. Simple right? I know 😀.

The audio HTML tag makes it possible to play sounds directly from web applications using the below syntax.

<audio src="" controls/>

The src attribute is the path to the audio you want to import.
The controls attribute enables the audio player control features such as the play button, pause button, volume control bar, fast forward button, and the back forward button buttons.

Examples

In this section I will show you how to import the audio file in your react application, there are two ways to achieve this, the first is through the import method and the other is the require method.

The Import Method

The import method is part of the JavaScript ES6 features, a method of importing resources such as files, images, and css in JavaScript, you can read more about it here.

The code below demonstrates how to import an audio file using the import method.

import audioSong from "./path-to-audio/lofi-song.jpg";

class AudioPlayer extends React.Component {
  render() {
    return (
      <React.Fragment>
      <h1>Audio Player</h1>
      <audio src={audioSong} controls />
      </React.Fragment>
    );
  }
}
ReactDOM.render(<AudioPlayer />, document.getElementById('root'));

The audio file is imported using the ES6 method and the import name is passed into the audio tag src attribute.

import audioSong from "./path-to-audio/lofi-song.jpg";

The Require Method

Another method of importing resources in JavaScript is through the require() method, a JavaScript file and module loader which can be used in adding resources such as audio files as demonstrated below.

class AudioPlayer extends React.Component {
  render() {
    return (
      <React.Fragment>
      <h1>Audio Player</h1>
      <audio src={require("./path-to-audio/lofi-song.jpg").default} />
      </React.Fragment>
    );
  }
}
ReactDOM.render(<AudioPlayer />, document.getElementById('root'));

In the case of the require() method, the audio file is imported directly in the src attribute of the audio HTML tag through the require() method.

<audio src={require("./path-to-audio/lofi-song.jpg").default} />

Note: You need to add the .default to the require() method to return the actual path of the audio file.

Try it yourself result

The final output of the above examples will produce a music player to the browser as shown below.

Conclusion

I hope you have learned from this tutorial article how you can implement an audio player in your React Application, this can be useful for adding a music player for your website user to interact with.

Resources

You might want to learn more about the audio player and other ways to implement it in a react application, below are links to useful resources that will be of help.

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed it and found the content useful, then you shouldn't miss the next one, you can subscribe to my newsletter to get notified of my upcoming contents and articles.

You can subscribe to my newsletter here

I will also like to connect with you, let's connect on:

Wishing you a productive day ahead. Bye Bye 🙋‍♂️

If you found my content helpful and would want to support my blog, you can support me by buying me a coffee below, my blog lives on coffee 😂.

Unclebigbay's 🚀 Blog