Home

Awesome

react-responsive-audio-player

react-responsive-audio-player in action

see a live demo here

A simple, clean, and responsive visual wrapper for the HTML audio tag, built with React. Give it a playlist and go.

NPM

If you're not using npm and you need production-ready scripts to include in your project, check out the releases.

Usage

HTML:

<!DOCTYPE html>
<html>
  <head><link rel="stylesheet" href="audioplayer.css"></head>
  <body>
    <div id="audio_player_container"></div>
    <script src="dist/main.js"></script>
  </body>
</html>

JavaScript (with JSX):

// dist/main.js
var React = require('react');
var ReactDOM = require('react-dom');
var AudioPlayer = require('react-responsive-audio-player');

var playlist =
  [{ url: 'audio/track1.mp3',
     title: 'Track 1 by Some Artist' },
   { url: 'audio/track2.mp3',
     title: 'Some Other Artist - Track 2' }];
ReactDOM.render(
  <AudioPlayer playlist={playlist} />,
  document.getElementById('audio_player_container')
);

JavaScript (without JSX):

// dist/main.js
...
ReactDOM.render(
  React.createElement(AudioPlayer, { playlist: playlist }),
  document.getElementById('audio_player_container')
);

Getting started

Quick start

The fastest way to get off the ground with this module is to paste the following code into an HTML file and open it in a web browser:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>React Responsive Audio Player</title>
    <style> html, body { margin: 0; background: lightseagreen; } </style>
    <link rel="stylesheet" href="https://unpkg.com/react-responsive-audio-player@1.5.0/dist/audioplayer.css">
  </head>
  <body>
    <div id="audio_player_container"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/prop-types/prop-types.js"></script>
    <script src="https://unpkg.com/react-responsive-audio-player@1.5.0/dist/audioplayer.js"></script>
    <script>
      var playlist =
        [{ url: 'song1.mp3', title: 'Track 1 - a track to remember' },
         { url: 'song2.ogg', title: 'Oggs Oggs Oggs' }];
      ReactDOM.render(
        React.createElement(
          'div',
          { style: { position: 'fixed', bottom: 0, width: '100%' } },
          React.createElement(AudioPlayer, {
            playlist: playlist,
            autoplay: true,
            autoplayDelayInSeconds: 2.1,
            controls: ['playpause', 'forwardskip', 'progressdisplay']
          })
        ),
        document.getElementById('audio_player_container')
      );
    </script>
  </body>
</html>

Of course you'll need to include paths to actual audio files, or the player will display and not work.

Package installation

If you use npm and a front-end package bundling system like Browserify or webpack, it's recommended that you install the package and its dependencies in your project:

npm install --save react-responsive-audio-player react react-dom

While react-dom isn't technically a peer dependency, you'll need it if you plan to place the audio player in the DOM, which you probably will.

When you first include the component in your project it might not look how you're expecting. Be sure to check the Styling section below.

Pre-built releases

If you prefer not to use a package bundler, you can find built releases to download here.

Options

Options can be passed to the AudioPlayer element as props. Currently supported props are:

None of these options are required, though the player will be functionally disabled if no playlist prop is provided.

Deprecated options

These will be removed in v2.0! Please migrate away.

Does this work with the Web Audio API?

We don't expose any special props for manipulating the Web Audio API with React.

However, you can use the audioElementRef prop and createMediaElementSource to process your audio before it gets sent to the speaker.

For example, you could use this code to add a low pass to high pass filter transition during the first 10 seconds your audio player is mounted:

<AudioPlayer
  playlist={playlist}
  audioElementRef={audio => {
    const ctx = new AudioContext();

    let source = ctx.createMediaElementSource(audio);

    for (const filterType of ['lowpass', 'highpass']) {
      const filter = ctx.createBiquadFilter();
      filter.type = filterType;
      filter.frequency.value = 100;
      filter.frequency.exponentialRampToValueAtTime(3000, 10);
      source = source.connect(filter);
    }

    source.connect(ctx.destination);
  }},
  crossOrigin="anonymous"
  autoplay
/>

You might need to set the crossOrigin prop in order for Web Audio API processing to work correctly.

Styling

In order to use the default stylings you'll need to grab the compiled audioplayer.css sheet from the module's dist/ directory. Again, if you're not using npm, you can get the sheet here.

It's easy to override the default styles with CSS. Alternatively, for styles which only affect the outer element, you can use React inline styles.

For example, if you want your audio player to take the full screen width, do the following:

Usage with SASS

If you preprocess your styles with Sass, you can have more powerful control via Sass variables. The defaults are located at the top of src/index.scss:

$audio_player_base_height: 50px !default;
$audio_player_base_bg_color: #333 !default;
$audio_player_base_text_color: #fff !default;
// ...etc

The !default flag means you can override these variable definitions before the styles are included.

// Include var overrides before default styles import
$audio_player_base_bg_color: firebrick;

// Using webpack css/sass module import syntax
@import '~react-responsive-audio-player/src/index';

// include other overrides afterward
.audio_player {
  width: 600px;
}

Development

For building and testing instructions, see CONTRIBUTING.md.

Acknowledgements

Thanks to BrowserStack for providing their platform free of charge for this project (and many other open source projects). We're using BrowserStack to test compatibility across multiple browsers and platforms.

<a href="https://www.browserstack.com"> <img alt="BrowserStack Logo" height="100" src="https://p14.zdusercontent.com/attachment/1015988/DucCZ7r9Wh1qj5RTUQUtIgaDM?token=eyJhbGciOiJkaXIiLCJlbmMiOiJBMTI4Q0JDLUhTMjU2In0..QyFYSeGwuz3hu2DYiIp-Wg.wG_egoKd46-VIYOLxlSOyc3zxeZQz0rLx0q6vklPvnEYiTRW2UolruFNGe2_h-Ci7kDR8hYqKyCbDJx8apDXyiJwwRiL1qYuBq9pdk8NP4h9znXRgs-5FCvAT-QX9ICsoDUEdHa8Bvj0sc_9ZjMocTn_njqzCkVv7PtKqT-QYf3zJIlsib0JvRgiMGuw__AyId65m1z7Q93LC4pVzlvqBL_4B26I2Mvt4NPqvlTbVUg_tbIWUDqzmhNBfqCWAuIfNYDb_EtIkdR8fWQ-uOFd5qjkB84NOi2ljlo7g5WrFYI.5MCH_b_7gSlMJ4L9twhThA"> </a>