How to play an mp3 file in ReactJS

Today we’ll show you how to play an mp3 file in ReactJS. In this short article, we’ll create an example to play an mp3 sound file in React.js.

How to play an mp3 file in ReactJS, react onclick play audio, react import mp3, react-sound tutorial, react audio player ui npm, Adding mp3 files to a Create React App app, A simple MP3 player with React.js, audio player in React, How to play sounds in React JS, Playing a sound file in a React project.

Checkout more articles on ReactJS

• redux-store" title="How to reset the state of a Redux store">How to reset the state of a Redux store
• react-select" title="How to disable an option in react-select">How to disable an option in react-select
• Google Maps in ReactJS">Implement Google Maps in ReactJS
• image-upload-in-reactjs" title="Image upload in ReactJS">Image upload in ReactJS
• form-validation-in-reactjs" title="Form Validation in ReactJS">Form Validation in ReactJS

Steps to play an mp3 file

1. Setup a react application">Setup a react application
2. Create component to play sound
3. Output

1. Setup a react application

First, we have to create an application in React JS. If you don’t know how to do it then refer to this link.

2. Create component to play sound

Here we’ll implement a demo in `App.js` file only. Let’s take three buttons for play, pause and stop audio sound. Also add a `checkbox` to set the loop of the audio tune based on the selection.

At the beginning of the demo, we will use `Audio` constructor using JavaScript to create `HTMLAudioElement`. Also declare variable to play audio in loop.

In the below code, update the audio file path of `.mp3`

// use Audio constructor to create HTMLAudioElement
const audioTune = new Audio('<YOUR_AUDIO_FILE_PATH.mp3>');

// variable to play audio in loop
const [playInLoop, setPlayInLoop] = useState(false);

Load audio file on `componentDidMount`.

// load audio file on component load
useEffect(() => {
  audioTune.load();
}, [])

Set loop to audio on `checkbox` change.

// set the loop of audio tune
useEffect(() => {
  audioTune.loop = playInLoop;
}, [playInLoop])

Create methods to play, pause and stop the audio sound.

// play audio sound
const playSound = () => {
  audioTune.play();
}

// pause audio sound
const pauseSound = () => {
  audioTune.pause();
}

// stop audio sound
const stopSound = () => {
  audioTune.pause();
  audioTune.currentTime = 0;
}

Check the below HTML elements to create a demo.

<div className="App">
  <h3 className="mb-4">Play an mp3 file - <a href="https://www.cluemediator.com">Clue Mediator</a></h3>

  <input type="button" className="btn btn-primary mr-2" value="Play" onClick={playSound}></input>
  <input type="button" className="btn btn-warning mr-2" value="Pause" onClick={pauseSound}></input>
  <input type="button" className="btn btn-danger mr-2" value="Stop" onClick={stopSound}></input>

  <label><input type="checkbox" checked={playInLoop} onChange={e => setPlayInLoop(e.target.checked)} /> Play in Loop</label>
</div>

That’s the changes required to play audio file. Let’s combine all together in one file.

App.js

import React, { useEffect, useState } from 'react';

function App() {

  // use Audio constructor to create HTMLAudioElement
  const audioTune = new Audio('<YOUR_AUDIO_FILE_PATH.mp3>');

  // variable to play audio in loop
  const [playInLoop, setPlayInLoop] = useState(false);

  // load audio file on component load
  useEffect(() => {
    audioTune.load();
  }, [])

  // set the loop of audio tune
  useEffect(() => {
    audioTune.loop = playInLoop;
  }, [playInLoop])

  // play audio sound
  const playSound = () => {
    audioTune.play();
  }

  // pause audio sound
  const pauseSound = () => {
    audioTune.pause();
  }

  // stop audio sound
  const stopSound = () => {
    audioTune.pause();
    audioTune.currentTime = 0;
  }

  return (
    <div className="App">
      <h3 className="mb-4">Play an mp3 file - <a href="https://www.cluemediator.com">Clue Mediator</a></h3>

      <input type="button" className="btn btn-primary mr-2" value="Play" onClick={playSound}></input>
      <input type="button" className="btn btn-warning mr-2" value="Pause" onClick={pauseSound}></input>
      <input type="button" className="btn btn-danger mr-2" value="Stop" onClick={stopSound}></input>

      <label><input type="checkbox" checked={playInLoop} onChange={e => setPlayInLoop(e.target.checked)} /> Play in Loop</label>
    </div>
  );
}

export default App;

3. Output

Run the project and check the output.

Output - How to play an mp3 file in ReactJS - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project