• Audio player component that provides consistent UI/UX on different browsers.
• Super customizable layout
• Flexbox css with SVG icons. Mobile friendly.
• I18n and a11y supported, keyboards events supported.
• Support Media Source Extensions (MSE) and Encrypted Media Extensions (EME)
• Written in TypeScript.

Live Demo: Storybook

Try it on CodePen: Basic, Playlist

Supported browsers: Chrome, Firefox, Safari, Edge

$ npm i react-h5-audio-player

Or

$ yarn add react-h5-audio-player

import AudioPlayer from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css';
// import 'react-h5-audio-player/lib/styles.less' Use LESS
// import 'react-h5-audio-player/src/styles.scss' Use SASS

const Player = () => (
  <AudioPlayer
    autoPlay
    src="https://example.com/audio.mp3"
    onPlay={e => console.log("onPlay")}
    // other props here
  />
);

They can be turned off by setting hasDefaultKeyBindings prop to false

More native attributes detail: MDN Audio element

The controls attribute defaults to false and should never be changed to true because this library is already providing UI.

Supported media events: onPlay, onPause, onEnded, onSeeking, onSeeked, onAbort, onCanPlay, onCanPlayThrough, onEmptied, onError, onLoadStart, onLoadedMetaData, onLoadedData, onPlaying, onSuspend, onWaiting, onVolumeChange

Docs: Media Events | MDN

Note: onTimeUpdate is not supported. Please use onListen with listenInterval for better performance.

Besides using props to change UI, React H5 Audio Player provides built-in class names and SASS/LESS variables for developers to overwrite.

$rhap_theme-color: #868686 !default;   // Color of all buttons and volume/progress indicators
$rhap_background-color: #fff !default; // Color of the player background
$rhap_bar-color: #e4e4e4 !default;     // Color of volume and progress bar
$rhap_time-color: #333 !default;       // Font color of current time and duration
$rhap_font-family: inherit !default;   // Font family of current time and duration

For LESS variables, just replace $ with @. This library supports both.

There are some status class names on the audio player's wrapper div. They can be used for overwriting styles.

For example:

.rhap_play-status--paused .rhap_progress-bar {
  // Overwrite the progress bar style while the audio is paused
}

You can get direct access to the underlying audio element. First get a ref to ReactAudioPlayer:

this.player = createRef()

<ReactAudioPlayer ref={this.player} />

Then you can access the audio element like this:

this.player.current.audio.current

You can use Media Source Extensions and Encrypted Media Extensions with this player. You need to provide the complete duration, and also a onSeek and onEncrypted callbacks. The logic for feeding the audio buffer and providing the decryption keys (if using encryption) must be set in the consumer side. The player does not provide that logic. Check the StoryBook example to understand better how to use.

https://github.com/lhz516/react-h5-audio-player/releases

Issues and PR's are welcome.

• Inspired by React Audio Player.
• Icon wrapper iconify
• Icons Material Design Icons