react-h5-audio-player

React H5 Audio Player

• Audio player component that provides consistent UI on different browsers.

• Flexbox design with SVG icons. Mobile friendly.

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

jumpInterval {Number} [5000]

Indicates the interval jumped when clicking rewind/forward button

progressUpdateInterval {Number} [500]

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 for developers to overwrite.

SASS variables - WIP

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

This project is inspired by React Audio Player.