react-h5-audio-player-bonobo v1.0.2

React H5 Audio Player

• Audio player component that provides consistent UI on different browsers.
• Flexbox layout with SVG icons. Mobile friendly.
• Accessibility supported, keyboards friendly.

Live Demo: Storybook

Supported browsers: Chrome, Firefox, Safari, Opera, Edge, IE (≥10)

Installation

npm i --save react-h5-audio-player@next

Usage

import AudioPlayer from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css';

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

Props

HTML Audio Tag Native Attributes

More native attributes detail: MDN Audio element

Other Props

showVolumeControl {Boolean} true

Show volume bar and mute button

showLoopControl {Boolean} true

Show loop toggle button

showSkipControls {Boolean} false

Show previous/Next buttons

showJumpControls {Boolean} true

Show Rewind/Forward buttons

onClickPrevious {Function (event)}

Called when click Previous button

onClickNext {Function (event)}

Called when click Next button

onPlayError {Function (error)}

Called when there's error clicking play button

progressJumpStep {Number} 5000

Indicates the jump step when clicking rewind/forward button or left/right arrow key

volumeJumpStep {Number} .1

Indicates the jump step when pressing up/down arrow key

progressUpdateInterval {Number} 20

Indicates the interval that the progress bar UI updates.

listenInterval {Number} 1000

Indicates how often to call the onListened prop during playback, in milliseconds.

onAbort {Function (event)}

Called when unloading the audio player, like when switching to a different src file. Passed the event.

onCanPlay {Function (event)}

Called when enough of the file has been downloaded to be able to start playing.

onEnded {Function (event)}

Called when playback has finished to the end of the file. Passed the event.

onError {Function (event)}

Called when the audio tag encounters an error. Passed the event.

onListen {Function (currentTime)}

Called every listenInterval milliseconds during playback.

onPause {Function (event)}

Called when the user pauses playback. Passed the event.

onPlay {Function (event)}

Called when the user taps play.

UI Overwrites

React H5 Audio Player provides built-in class names and SASS variables for developers to overwrite.

SASS variables

• $rhap_theme-color: #868686 !default;
• $rhap_background-color: #fff !default;
• $rhap_bar-color: #e4e4e4 !default;
• $rhap_time-color: #000 !default;

Advanced Usage

Access to the audio element

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

<ReactAudioPlayer ref={c => (this.player = c)} />

Then you can access the audio element like this:

this.player.audio

Migrations

Breaking changes from 1.x to 2.x

• Removed inline styles, import css or scss manually
• Removed props hidePlayer - Use parent logic to hide player
• Removed props onDragStart, onDragMove, onDragEnd - V2 isn't using drag events anymore

Breaking changes from 0.x to 1.x

In 1.x, we use prop-types package instead of using it directly in React. Thus we dropped support under react@15.5.0. The usage will remain the same.

How to contribute

Issues and PR's are welcome.

Credits

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