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
Steps to play an mp3 file
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
1 2 3 4 5 | // 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
.
1 2 3 4 | // load audio file on component load useEffect(() => { audioTune.load(); }, []) |
Set loop to audio on checkbox
change.
1 2 3 4 | // set the loop of audio tune useEffect(() => { audioTune.loop = playInLoop; }, [playInLoop]) |
Create methods to play, pause and stop the audio sound.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 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.
1 2 3 4 5 6 7 8 9 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 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.
That’s it for today.
Thank you for reading. Happy Coding!
can i ask how can i add api to this code
Yeah sure, Where do you want to integrate the API?