5

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?

Dawn17
  • 5,159
  • 8
  • 32
  • 79

1 Answers1

10

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.

Marko Savic
  • 1,087
  • 1
  • 9
  • 19
  • Thanks for the code. But I am getting an unexpected token error on the line that has `play = () => {`. Any Idea? – Dawn17 Dec 03 '17 at 09:21
  • And I am also confused where to add `
    `     – Dawn17 Dec 03 '17 at 09:22
  • @Dawn17 For the first problem see this: https://stackoverflow.com/questions/31362292/how-to-use-arrow-functions-public-class-fields-as-class-methods And for the second one please read react documentation: https://reactjs.org/docs/rendering-elements.html#rendering-an-element-into-the-dom – Marko Savic Dec 03 '17 at 09:41
  • Does this work on iOS? I had an almost identical solution, but it doesn't work on Safari on iPhones. It seems like playback needs to be triggered by user action directly, not programatically in another function. [Developer docs](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html), and [this answer](https://stackoverflow.com/a/12804634/8620945). – Adam D Jan 04 '19 at 12:50
  • For me it works well. In which part you have a problem? Tested with Expo on Android and iOS.https://expo.io/ – Marko Savic Jan 09 '19 at 20:58
  • what if I have assign new url on click ? Please how can I ? – K.S May 24 '20 at 12:45