react-h5-audio-player-bonobo

A React audio player with UI. Mobile compatible.

Usage no npm install needed!

<script type="module">
  import reactH5AudioPlayerBonobo from 'https://cdn.skypack.dev/react-h5-audio-player-bonobo';
</script>

README

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.

screenshot

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

Props Type Default
src String ''
preload String 'auto'
autoPlay Boolean false
loop Boolean false
muted Boolean false
loop Boolean false
volume Number 1.0

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