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 ="http://example.com/audio.mp3" = // />;
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 = />
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
orscss
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