Is there a way to play a music with <audio> in react?

Question

I am creating a simple react app that requires playing music with a given url. I tried to test with a hard coded music url and use the <audio> tag to play the music just as we do in HTML.

class Music extends React.Component {
  render() {

    return (
      <span>

        <audio src="URL">
  </span>

    )
  }
}

But this will not compile. What is the simplest way to play a music in a react app?

Answer 1

One solution is with HTML5 Audio. Create new Audio object and control it with custom Play / Pause buttons.

Basic example:

class Music extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      play: false,
      pause: true,
    }
    this.url = "http://streaming.tdiradio.com:8000/house.mp3";
    this.audio = new Audio(this.url);
  }

  play = () => {
  this.setState({ play: true, pause: false })
    this.audio.play();
  }
  
  pause = () => {
  this.setState({ play: false, pause: true })
    this.audio.pause();
  }
  
  render() {
    
  return (
    <div>
      <button onClick={this.play}>Play</button>
      <button onClick={this.pause}>Pause</button>
    </div>
    );
  }
}

ReactDOM.render(
  <Music />,
  document.getElementById('container')
);

<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Also you can use addEventListener to control and handle Play / Pause.

Play:

this.audio.addEventListener('play', () => {
  this.setState({
    play: true,
    pause: false,
  })
});

Pause:

this.audio.addEventListener('pause', () => {
  this.setState({
    play: false,
    pause: true,
  })
});

Documentation and examples:

Audio/Video Event Listener

MDN HTML5 Audio

Important note:

The HTML5 Audio element does not have a stop() function, so the audio after pause() is still loading (buffering in background).

This is a solution: HTML5 Video: Force abort of buffering

JSFIddle: https://jsfiddle.net/y2j0vzbe/

Hope this can help.