react-h5-audio-player

For playing audio chunks, MSE streams, or encrypted audio, provide an mse configuration object to the AudioPlayer.

Required Configuration Keys:

• mse.srcDuration: The complete duration of the MSE audio chunks.
• mse.onSeek: Callback used when a seek occurs.
• mse.onEncrypted: Callback used when encrypted audio is detected and needs decryption.

Note: The player does not provide the logic for feeding the audio buffer or providing decryption keys; this must be implemented by the consumer. Refer to the Storybook example for implementation details.

Depending on your use case (such as mobile browser compatibility), you can hide various parts of the player UI using specific props:

• Hide Volume: Useful for mobile browsers that do not support volume control.
• Hide Loop Button: Useful for mobile browsers.
• Hide Download Progress: Removes the download progress indicator.
• Hide Filled Progress: Removes the filled portion of the progress bar.
• Hide All Controls: Removes all interactive controls from the player.

To install the latest version (v4), use the @next tag. For the stable v3 version, install without the tag.

# Install v4
npm i react-h5-audio-player@next
# or
yarn add react-h5-audio-player@next

# Install v3
npm i react-h5-audio-player
# or
yarn add react-h5-audio-player

The player's layout is determined by the layout prop (defaulting to 'stacked'). You can customize which UI elements appear in specific sections using the RHAP_UI constants.

Available RHAP_UI modules:

• RHAP_UI.CURRENT_TIME
• RHAP_UI.CURRENT_LEFT_TIME
• RHAP_UI.PROGRESS_BAR
• RHAP_UI.DURATION
• RHAP_UI.ADDITIONAL_CONTROLS
• RHAP_UI.MAIN_CONTROLS
• RHAP_UI.VOLUME_CONTROLS
• RHAP_UI.LOOP
• RHAP_UI.VOLUME

To customize a section, pass an array of these constants or custom ReactElements to the corresponding prop (e.g., customProgressBarSection).

import { RHAP_UI } from 'react-h5-audio-player';

// Example: Customizing the progress bar section to only show duration
<H5AudioPlayer
  src="..."
  customProgressBarSection={[RHAP_UI.DURATION]}
/>

You can control the duration (in milliseconds) for seeking forward or backward when a user interacts with the progress bar or jump controls using the progressJumpSteps prop.

By default, the jump step is set to 5 seconds in both directions.

Prop Details:

• Type: object
• Default: { forward: 5000, backward: 5000 }
• Keys:
  • forward: Milliseconds to jump forward.
  • backward: Milliseconds to jump backward.

<AudioPlayer 
  progressJumpSteps={{ forward: 10000, backward: 10000 }} 
/>

You can overwrite the default theme using SASS (or LESS by replacing $ with @) variables:

$rhap_theme-color: #868686 !default;   // Color of buttons and indicators
$rhap_background-color: #fff !default; // Player background
$rhap_bar-color: #e4e4e4 !default;     // Volume and progress bar color
$rhap_time-color: #333 !default;       // Font color of time
$rhap_font-family: inherit !default;   // Font family of time

You can control how frequently the player's progress bar updates by using the progressUpdateInterval prop. This prop accepts a value in milliseconds.

Recommendation: Do not use a value greater than 1000 (1 second), as this may result in a choppy or inaccurate visual representation of the audio progress.

<AudioPlayer 
  src="your-audio-file.mp3" 
  progressUpdateInterval={500} // Updates every 500ms
/>