How to Make a Custom Audio Player in React JS

In this article you will learn how to create Custom Audio Player using React JS. Here I have shared two types of designs. 

First I made a basic or simple React JS Audio Player. Then shared an advance design. There are buttons to control the audio in that advanced design.

An audio player in React is a software application or web-based application that plays audio files and built using React library. It is a React component that controls the audio player, including playing, pausing, and seeking through the audio file. React is a JavaScript library for building user interfaces, and it allows you to build reusable UI components that can be easily integrated into your application.

React audio players can be built using the HTML <audio> element and the ref feature provided by React to access the audio element’s properties and methods. The React component can use its state to keep track of the audio player’s status, such as whether it is playing or paused, and use that state to control the audio player.

There are also various libraries available for building an audio player in React such as react-audio-player, react-h5-audio-player, react-player, and more. These libraries provide an easy-to-use API to handle audio playback and provide additional features such as volume control, playback speed control, and more.

React audio players can be used in web applications and other web-based platforms that support React. They can be integrated into websites, web apps, and mobile apps to play audio files.

It’s important to keep in mind that React audio players are limited by the capabilities of the browser and device they are running on, and some features may not be available on all browsers or devices.

Simple Audio Player in React JS

To create an audio player in React, you can use the HTML5 <audio> tag and control it with React state and props. Here is an example of a basic audio player component:

				
					import React from 'react';

class AudioPlayer extends React.Component {
  state = {
    playing: false,
    currentTime: 0,
    duration: 0
  }

  audioRef = React.createRef()

  handlePlay = () => {
    this.audioRef.current.play()
    this.setState({ playing: true })
  }

  handlePause = () => {
    this.audioRef.current.pause()
    this.setState({ playing: false })
  }

  handleTimeUpdate = () => {
    this.setState({
      currentTime: this.audioRef.current.currentTime,
      duration: this.audioRef.current.duration
    })
  }

  render() {
    const { playing, currentTime, duration } = this.state
    const { src } = this.props

    return (
      <div>
        <audio
          ref={this.audioRef}
          src={src}
          onTimeUpdate={this.handleTimeUpdate}
        />
        <button onClick={playing ? this.handlePause : this.handlePlay}>
          {playing ? 'Pause' : 'Play'}
        </button>
        <p>{currentTime} / {duration}</p>
      </div>
    )
  }
}

export default AudioPlayer;

Then you can use this component in your application like this:

				
					<AudioPlayer src="http://example.com/audio.mp3" />

In this example, we are using the ref to access the audio element, updating the current time and duration in the state, and using it to show the current time, duration and also a play/pause button.

Note: This is just an example and you can customize it as per your requirement. You can add additional functionality like volume control, seeking, etc.

Advance React JS Audio Player

An advanced audio player in React can include additional functionality such as volume control, seeking, playlist support, and more. 

Here is an example of an advanced audio player component that includes some of these features:

				
					import React from 'react';

class AudioPlayer extends React.Component {
  state = {
    playing: false,
    currentTime: 0,
    duration: 0,
    volume: 1,
    currentTrack: 0,
    tracks: [],
  }

  audioRef = React.createRef()

  componentDidMount() {
    this.setState({ tracks: this.props.tracks });
  }

  handlePlay = () => {
    this.audioRef.current.play()
    this.setState({ playing: true })
  }

  handlePause = () => {
    this.audioRef.current.pause()
    this.setState({ playing: false })
  }

  handleTimeUpdate = () => {
    this.setState({
      currentTime: this.audioRef.current.currentTime,
      duration: this.audioRef.current.duration
    })
  }

  handleVolumeChange = (e) => {
    this.setState({ volume: e.target.value });
    this.audioRef.current.volume = e.target.value;
  }

  handleSeek = (e) => {
    this.audioRef.current.currentTime = e.target.value;
  }

  handleNextTrack = () => {
    if (this.state.currentTrack < this.state.tracks.length - 1) {
      this.setState(prevState => ({ currentTrack: prevState.currentTrack + 1 }));
    }
  }

  handlePrevTrack = () => {
    if (this.state.currentTrack > 0) {
      this.setState(prevState => ({ currentTrack: prevState.currentTrack - 1 }));
    }
  }

  render() {
    const { playing, currentTime, duration, volume, currentTrack, tracks } = this.state

    return (
      <div>
        <audio
          ref={this.audioRef}
          src={tracks[currentTrack].src}
          onTimeUpdate={this.handleTimeUpdate}
          onEnded={this.handleNextTrack}
        />
        <div>
          <button onClick={this.handlePrevTrack}>Prev</button>
          <button onClick={playing ? this.handlePause : this.handlePlay}>
            {playing ? 'Pause' : 'Play'}
          </button>
          <button onClick={this.handleNextTrack}>Next</button>
          <p>{tracks[currentTrack].name}</p>
        </div>
        <div>
          <input
            type="range"
            min={0}
            max={1}
            step={0.01}
            value={volume}
            onChange={this.handleVolumeChange}
          />
          <input
            type="range"
            min={0}
            max={duration}
            step={0.01}
            value={currentTime}
            onChange={this.handleSeek}
          />
        </div>
      </div>
    )
  }
}

export default AudioPlayer

It uses the <audio> tag and controls it with React state and props. It also has additional functionality such as volume control, seeking, playlist support (using the tracks state, handleNextTrack, handlePrevTrack functions), and more. 

It also uses audioRef to reference the audio element, updating the current time and duration in the state. Also, it uses it to show the current time, duration, volume and also a play/pause button, next/prev buttons and a playlist. It also uses componentDidMount lifecycle method to set the tracks prop value into the tracks state.

You can use this component in your application by passing tracks prop like this:

				
					<AudioPlayer tracks={[
  {
    src: 'http://example.com/audio1.mp3',
    name: 'Track 1'
  },
  {
    src: 'http://example.com/audio2.mp3',
    name: 'Track 2'
  }
]} />

It’s important to note that this is just an example, you may need to customize it as per your requirement and add additional functionality if needed. You will also need to add the JSX in the render() method to display the player interface and controls.

It also displays the volume control, seek control, and track information. It also uses the playing, currentTime, duration, volume, currentTrack, and tracks from state to show the relevant information and control the audio player.

Hopefully from this tutorial you have learned how to create React Audio Player Components. If you have any information, you can comment me.