Justin McCandless

The HTML5 audio tag provides a great way to work with simple audio in a web app, but when you’re using React’s nice pattern in the rest of your app, it can be a pain to go back to messing directly with DOM objects. The ReactAudioPlayer module provides a thin wrapper to the audio tag that fits right into a React app.

ReactAudioPlayer is something I wrote while working on an audio project. It passes through all of the typical attributes that the audio tag uses (listed nicely on the MDN audio article). Most importantly, it provides a nice interface to all of the events fired by the audio tag. So instead of messing with references to your audio tag and setting event listeners everywhere, you can do this:

<ReactAudioPlayer
  onPause={this.onPause}
/>

This follows for any other event you can listen to on the audio tag. And of course, any changes to the passed in props will update the audio tag immediately. This includes the src attribute, which will change the currently playing or loaded media in the audio tag.

ReactAudioPlayer is an npm module, so you can install it in your app with npm install --save react-audio-player. Check it out on npm and on github.