React is an easy to use JavaScript framework that lets us create front end apps.
In this article, we’ll look at how to create an audio player with React and JavaScript.
Create the Project
We can create the React project with Create React App.
To install it, we run:
npx create-react-app audio-player
with NPM to create our React project.
Create the Audio Player
To create the audio player, we write:
import React, { useRef, useState } from "react";
export default function App() {
const audioPlayer = useRef();
const [currentTime, setCurrentTime] = useState(0);
const [seekValue, setSeekValue] = useState(0);
const play = () => {
audioPlayer.current.play();
};
const pause = () => {
audioPlayer.current.pause();
};
const stop = () => {
audioPlayer.current.pause();
audioPlayer.current.currentTime = 0;
};
const setSpeed = (speed) => {
audioPlayer.current.playbackRate = speed;
};
const onPlaying = () => {
setCurrentTime(audioPlayer.current.currentTime);
setSeekValue(
(audioPlayer.current.currentTime / audioPlayer.current.duration) * 100
);
};
return (
<div className="App">
<audio
src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"
ref={audioPlayer}
onTimeUpdate={onPlaying}
>
Your browser does not support the
<code>audio</code> element.
</audio>
<br />
<p>{currentTime}</p>
<input
type="range"
min="0"
max="100"
step="1"
value={seekValue}
onChange={(e) => {
const seekto = audioPlayer.current.duration * (+e.target.value / 100);
audioPlayer.current.currentTime = seekto;
setSeekValue(e.target.value);
}}
/>
<div>
<button onClick={play}>play</button>
<button onClick={pause}>pause</button>
<button onClick={stop}>stop</button>
<button onClick={() => setSpeed(0.5)}>0.5x</button>
<button onClick={() => setSpeed(1)}>1x</button>
<button onClick={() => setSpeed(1.5)}>1.5x</button>
<button onClick={() => setSpeed(2)}>2x</button>
</div>
</div>
);
}
We create the audioPlayer ref that we assign to the audio element.
Then we create the currentTime state to set the current time of the audio playback.
seekValue has the time value we seek to.
The play function gets the audioPlayer and call play on it to play the video.
The pause function calls pause on the audio element.
The stop function calls pause and also set the currentTime of the audio element to 0 to reset the play position back to the beginning.
The onPlaying function sets the currentTime to the audio element’s currentTime value in seconds.
setSeekValue sets the seekValue to a value between 0and 100.
Below that, we have the audio element that has the onTimeUpdate prop set to the onPlaying function to set the currentTime .
Then we show the currentTime to the user.
The range input lets us change its value by moving the slider dot.
value is set to seekValue which we can change and we change that with the onChange callback and the onPlaying function.
In the onChange prop, we also set the currentTime of the audio player element.
Below that, we have the play, pause, and stop buttons to call the respective functions when we click them.
And we have 3 buttons that call setSpeed when we click them.
Conclusion
We can create an audio player easily with React and JavaScript.
