React H5 Audio Player
React audio player component with UI. It provides time indicator on both desktop and mobile devices.
Install / Use
npx skills add lhz516/react-h5-audio-playerInstalls into whichever agent you are using.
README
- Audio player component that provides consistent UI/UX on different browsers.
- Super customizable layout
- Flexbox css with SVG icons. Mobile friendly.
- I18n and a11y supported, keyboards events supported.
- Support Media Source Extensions (MSE) and Encrypted Media Extensions (EME)
- Written in TypeScript.
Live Demo: Storybook
Try it on CodePen: Basic, Playlist
Supported browsers: Chrome, Firefox, Safari, Edge
Migrate from v3.x to v4
Installation
Install with @next for v4, without @next for v3
$ npm i react-h5-audio-player@next
Or
$ yarn add 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
/>
);
Keyboard shortcuts (When audio player focused)
They can be turned off by setting hasDefaultKeyBindings prop to false
| 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 | 'auto' | 'metadata' | 'none' | 'auto' | | | autoPlay | boolean | false | Won't work on most mobile devices | | loop | boolean | false | | | muted | boolean | false | | | volume | number | 1.0 | Won't work on most mobile devices | | 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/UX Props
| Props | Type | Default | Note |
| ------------------------ | ----------------- | ------- | ---- |
| showSkipControls | boolean | false | Show Previous/Next buttons |
| showJumpControls | boolean | true | Show Rewind/Forward buttons |
| showDownloadProgress | boolean | true | Show download progress over progress bar |
| showFilledProgress | boolean | true | Show filled (already played) area on progress bar |
| showFilledVolume | boolean | false | Show filled volume area on volume bar |
| hasDefaultKeyBindings | boolean | true | Whether has default keyboard shortcuts |
| autoPlayAfterSrcChange | boolean | true | Play audio after src is changed, no matter autoPlay is true or false |
| volumeJumpStep | number | 0.1 | Indicates the volume jump step when pressing up/down arrow key, volume range is 0 to 1 |
| progressJumpSteps | object | { backward: 5000, forward: 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 |
| timeFormat | 'auto' | 'mm:ss'<br>| 'hh:mm:ss' | 'auto' | Time format for both current time and duration. 'auto' means when duration is greater than one hour, time format is hh:mm:ss, otherwise it's mm:ss |
| header | ReactNode | null | Header of the audio player |
| footer | ReactNode | null | Footer of the audio player |
| layout | 'stacked' | 'horizontal' |<br>'stacked-reverse' |<br>'horizontal-reverse' | 'stacked' | Overall layout of the audio player |
| customIcons | CustomIcons | {} | Custom icons to replace the default ones |
| customProgressBarSection | Array<string |<br>ReactElement> | [CURRENT_TIME,<br>PROGRESS_BAR,<br>DURATION] | Custom layout of progress bar section |
| customControlsSection | Array<string |<br>ReactElement> | [ADDITIONAL_CONTROLS,<br>MAIN_CONTROLS,<br>VOLUME_CONTROLS] | Custom layout of controls section |
| customAdditionalControls | Array<string |<br>ReactElement> | [LOOP] | Custom layout of additional controls |
| customVolumeControls | Array<string |<br>ReactElement> | [VOLUME] | Custom layout of volume controls |
| i18nAriaLabels | I18nAriaLabels| I18nAriaLabels | A configuration object to overwrite the default aria-label on the action buttons |
| mse | Object | null | A configuration object so the player can play audio chunks, MSE streams and encrypted audio (See section about Media Source Extensions in this Readme) |
| mse.srcDuration | number | - | The complete duration of the MSE audio chunks together (this is a key of the mse prop) |
| mse.onSeek | Function (Event) | - | The callback to be used when seek happens (this is a key of the mse prop) |
| mse.srcDuration | number | - | The callback to be used when encrypted audio is detected and needs to be decrypted (this is a key of the mse prop) |
Event Props
Supported media events: onPlay, onPause, onEnded, onSeeking, onSeeked, onAbort, onCanPlay, onCanPlayThrough, onEmptied, onError, onLoadStart, onLoadedMetaData, onLoadedData, onPlaying, onSuspend, onWaiting, onVolumeChange
Docs: Media Events | MDN
Note: onTimeUpdate is not supported. Please use onListen with listenInterval for better performance.
Other events
| Props | Type | Default | Note |
| ------------------------ | ----------------- | ------- | ---- |
| onClickPrevious | Function (Event) | null | Called when click Previous button |
| onClickNext | Function (Event) | null | Called when click Next button |
| onListen | Function (Event) | null | Called every listenInterval milliseconds during playback |
| onPlayError | Function (Error) | null | Called when there's error invoking audio.play(), it captures error that onError won't catch |
| onChangeCurrentTimeError | Function () | null | Called when dragging progress bar or press rewind/forward while the audio hasn't loaded yet |
UI Overwrites
Besides using props to change UI, 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-col
Related Skills
imsg
385.5kUse the imsg CLI from OpenClaw agents for iMessage/SMS DMs, groups, replies, reactions, polls, watching, and private-API actions.
qqbot-channel
385.5kQQ channel management skill. Use qqbot_channel_api for explicit QQ channel-management requests; confirm write, delete, and bulk actions before calling authenticated QQ Open Platform endpoints.
Writing Hookify Rules
140.6kThis skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
Agent Development
140.6kThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or…
