React.js Play MP3 Music File on Button Click

MP3 Music refers to the digital audio files that are encoded using the MP3 format. MP3, which stands for MPEG-1 Audio Layer III, is a popular audio compression format that significantly reduces file size while maintaining a high level of sound quality. This makes MP3 music files ideal for storing and transferring music on digital devices.

In this tutorial, we will learn how to play MP3 music file on button click in React js using bootstrap and functional component. To play MP3 music files using buttons in React js, follow these steps.

• Step 1: Install React App
• Step 2: Install Bootstrap Library
• Step 3: Create Component File
• Step 4: Play MP3 Music File
• Step 5: Update App.js File
• Step 6: View App in Browser

Step 1: Install React App

To create the React project, you need to install it using the create-react-app tool.

You have to type the given command on the terminal screen; you may change app name if you want.

npx create-react-app my-react-app

Now, you have to get inside the app folder.

cd my-react-app

Step 2: Install Bootstrap Library

To design the button which will invoke the music from the audio file we may use bootstrap css framework.

If you can write custom CSS then this package is not mandatory.

npm i bootstrap --legacy-peer-deps

Step 3: Create Component File

Next, create the new folder by the name of components/, afterwards make the new file and name it UserProfile.js file.

Here is how a basic function component looks in React.

import React from 'react'
function UserProfile() {
  return (
    <div></div>
  )
}
export default UserProfile

Step 4: Play MP3 Music File

The initAudio() method gets the access to the button DOM element.

Use the audio tag followed by source, you can pass the file source path in the src tag.

Add the code in the components/UserProfile.js file.

import React from "react";
function UserProfile() {
  let initAudio = () => {
    const targetAudio = document.getElementsByClassName("audioBtn")[0];
    targetAudio.play();
  };
  return (
    <div>
      <button className="btn btn-danger" onClick={initAudio}>
        Play Mp3 Audio
      </button>
      <audio className="audioBtn">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></source>
      </audio>
    </div>
  );
}
export default UserProfile;

Step 5: Update App.js File

In this step, we will open the App.js file, this file is the main entry point of React.

We have to register the component inside the App() method.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import UserProfile from "./components/UserProfile";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Play Mp3 Audio File Example</h2>
      <UserProfile />
    </div>
  );
}
export default App;

Step 6: View App in Browser

Lastly, type and invoke the given command to start the React application.

npm start

Here is the url which will run your app on the browser.

http://localhost:3000

In this tutorial you learned how to create a button that plays MP3 music file on button transition or on click of React js without using any external library.

Thanks for reading !!!

#react