Skip to content

React audio player component with UI. It provides time indicator on both desktop and mobile devices.

License

Notifications You must be signed in to change notification settings

clarehuang/react-h5-audio-player

 
 

Repository files navigation

logo

React H5 Audio Player

MIT License Monthly download Latest version

  • Audio player component that provides consistent UI/UX on different browsers.
  • Flexbox layout with SVG icons. Mobile friendly.
  • Accessibility supported, keyboards events supported.
  • Written in TypeScript.

screenshot

Live Demo: Storybook

Website example: hanzluo.com | Code

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

Installation

$ npm i react-h5-audio-player

Or

$ yarn add react-h5-audio-player

Usage

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="http://example.com/audio.mp3"
    onPlay={e => console.log("onPlay")}
    // other props here
  />
);

Keyboard shortcuts (When audio player focused)

Key binding Action
Space Play/Pause
Rewind
Forward
Volume up
Volume down
L Toggle loop
M Toggle mute

Props

HTML Audio Tag Native Attributes

Props Type Default Note
src string ''
preload string 'auto'
autoPlay boolean false Won't work on most mobile
loop boolean false
muted boolean false
loop boolean false
volume number 1.0 Won't work on most mobile
crossOrigin string undefined
mediaGroup string undefined

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.

UI Props

Props Type Default Note
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
showDownloadProgress boolean true Show download progress over progress bar
volumeJumpStep number 0.1 Indicates the volume jump step when pressing up/down arrow key, volume range is 0 to 1
progressJumpStep number 5000 Indicates the progress jump step (ms) when clicking rewind/forward button or left/right arrow key
progressUpdateInterval number 20 Indicates the interval (ms) that the progress bar UI updates,
listenInterval number 1000 Indicates the interval (ms) to call the onListened prop during playback
defaultCurrentTime ReactNode '--:--' Default display for audio's current time before src's meta data is loaded
defaultDuration ReactNode '--:--' Default display for audio's duration before src's meta data is loaded

Event Props

Props Type Default Note
onClickPrevious Function (Event) null Called when click Previous button
onClickNext Function (Event) null Called when click Next button
onPlayError Function (Error) null Called when there's error invoking audio.play(), it captures error that onError won't catch
onListen Function (number) null Called every listenInterval milliseconds during playback
onPlay Function (Event) null Called when user plays the audio
onPause Function (Event) null Called when user pauses the audio
onAbort Function (Event) null Called when unloading the audio player, like when switching to a different src file
onCanPlay Function (Event) null Called when enough of the file has been downloaded to be able to start playing
onCanPlayThrough Function (Event) null Called when enough of the file has been downloaded to play through the entire file
onEnded Function (Event) null Called when playback has finished to the end of the file
onError Function (Event) null Called when the audio tag encounters an error

UI Overwrites

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

SASS variables

$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 @.

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)} /> // Using `createRef` also works

Then you can access the audio element like this:

this.player.audio

Release Notes

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

Breaking changes from 1.x to 2.x

  • Removed inline styles, import css, scss or less 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

About

React audio player component with UI. It provides time indicator on both desktop and mobile devices.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 78.0%
  • JavaScript 12.9%
  • CSS 9.1%