Gathering detailed insights and metrics for react-h5-audio-player
Gathering detailed insights and metrics for react-h5-audio-player
Installations
npm install react-h5-audio-playerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.9.0
NPM Version
10.1.0
Score
89.5
Supply Chain
94.5
Quality
84
Maintenance
100
Vulnerability
100
License
Releases
54
Contributors
11
Languages
5
TypeScript
JavaScript
MDX
SCSS
Shell
TypeScript (54.5%)
JavaScript (27.42%)
MDX (13.69%)
SCSS (4.34%)
Shell (0.06%)
Developer
Download Statistics
Total Downloads
4,234,066
Last Day
3,836
Last Week
29,281
Last Month
149,570
Last Year
1,450,915
GitHub Statistics
633 Stars
197 Commits
97 Forks
10 Watching
4 Branches
11 Contributors
Package Meta Information
Latest Version
3.9.3
Package Id
react-h5-audio-player@3.9.3
Unpacked Size
286.40 kB
Size
53.98 kB
File Count
54
NPM Version
10.1.0
Node Version
20.9.0
Publised On
01 Jul 2024
Total Downloads
Cumulative downloads
Total Downloads
4,234,066
Last day
-40%
3,836
Compared to previous day
Last week
-22.2%
29,281
Compared to previous week
Last month
10.3%
149,570
Compared to previous month
Last year
33%
1,450,915
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
39
jestsasshuskyreactenzymeeslintwebpackprettiercross-envnode-sassreact-dom@babel/clicss-loadertypescript@babel/corelint-stagednpm-run-allsass-loaderwebpack-cli@types/reactbabel-loader@types/eventsstatic-server@storybook/react@babel/preset-env@babel/preset-reacteslint-plugin-react@storybook/addon-docsless-plugin-sass2lesseslint-config-prettiereslint-plugin-jsx-a11yeslint-plugin-prettierenzyme-adapter-react-16@babel/preset-typescript@storybook/addon-actions@typescript-eslint/parser@babel/plugin-transform-runtime@typescript-eslint/eslint-plugin@babel/plugin-proposal-class-properties
Versions
React H5 Audio Player
- 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 v2.x to v3
Installation
$ npm i react-h5-audio-player
Or
$ yarn add react-h5-audio-player
Usage
1import AudioPlayer from 'react-h5-audio-player'; 2import 'react-h5-audio-player/lib/styles.css'; 3// import 'react-h5-audio-player/lib/styles.less' Use LESS 4// import 'react-h5-audio-player/src/styles.scss' Use SASS 5 6const Player = () => ( 7 <AudioPlayer 8 autoPlay 9 src="http://example.com/audio.mp3" 10 onPlay={e => console.log("onPlay")} 11 // other props here 12 /> 13);
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 |
| progressJumpStep | number | 5000 | Deprecated, use progressJumpSteps. Indicates the progress jump step (ms) when clicking rewind/forward button or left/right arrow key |
| 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' | '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' | 'stacked-reverse' | 'horizontal-reverse' | 'stacked' | Overall layout of the audio player |
| customIcons | CustomIcons | {} | Custom icons to replace the default ones |
| customProgressBarSection | Array<string | ReactElement> | [CURRENT_TIME, PROGRESS_BAR, DURATION] | Custom layout of progress bar section |
| customControlsSection | Array<string | ReactElement> | [ADDITIONAL_CONTROLS, MAIN_CONTROLS, VOLUME_CONTROLS] | Custom layout of controls section |
| customAdditionalControls | Array<string | ReactElement> | [LOOP] | Custom layout of additional controls |
| customVolumeControls | Array<string | 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
1$rhap_theme-color: #868686 !default; // Color of all buttons and volume/progress indicators 2$rhap_background-color: #fff !default; // Color of the player background 3$rhap_bar-color: #e4e4e4 !default; // Color of volume and progress bar 4$rhap_time-color: #333 !default; // Font color of current time and duration 5$rhap_font-family: inherit !default; // Font family of current time and duration
For LESS variables, just replace $ with @. This library supports both.
Status class names
There are some status class names on the audio player's wrapper div. They can be used for overwriting styles.
| className | Description |
|---|---|
| rhap_loop--on | Loop is on |
| rhap_loop--off | Loop is off |
| rhap_play-status--paused | Paused status |
| rhap_play-status--playing | Playing status |
For example:
1.rhap_play-status--paused .rhap_progress-bar { 2 // Overwrite the progress bar style while the audio is paused 3}
Advanced Usage
Access to the audio element
You can get direct access to the underlying audio element. First get a ref to ReactAudioPlayer:
1this.player = createRef() 2 3<ReactAudioPlayer ref={this.player} />
Then you can access the audio element like this:
this.player.current.audio.current
Media Source Extensions and Encrypted Media Extensions
You can use Media Source Extensions and Encrypted Media Extensions with this player. You need to provide the complete duration, and also a onSeek and onEncrypted callbacks. The logic for feeding the audio buffer and providing the decryption keys (if using encryption) must be set in the consumer side. The player does not provide that logic. Check the StoryBook example to understand better how to use.
Release Notes
https://github.com/lhz516/react-h5-audio-player/releases
How to contribute
Issues and PR's are welcome.
Credits
- Inspired by React Audio Player.
- Icon wrapper iconify
- Icons Material Design Icons
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
3 commit(s) and 3 issue activity found in the last 90 days -- score normalized to 5
Reason
Found 2/22 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/nodejs.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/lhz516/react-h5-audio-player/nodejs.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/lhz516/react-h5-audio-player/nodejs.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/nodejs.yml:28
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 10 are checked with a SAST tool
Reason
40 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-v834-rhv4-65m3
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
3
/10
Last Scanned on 2024-12-16
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More