Installations
npm install react-custom-audio-playerDeveloper Guide
Typescript
No
Module System
N/A
Node Version
14.21.3
NPM Version
6.14.18
Score
68.3
Supply Chain
91.9
Quality
88
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (55.08%)
SCSS (44.92%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
Bala-raj
Download Statistics
Total Downloads
36,331
Last Day
32
Last Week
223
Last Month
919
Last Year
10,035
GitHub Statistics
4 Stars
171 Commits
7 Forks
6 Watchers
13 Branches
8 Contributors
Updated on Jan 09, 2025
Bundle Size
39.73 kB
Minified
13.31 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
1.3.15
Package Id
react-custom-audio-player@1.3.15
Unpacked Size
147.43 kB
Size
38.59 kB
File Count
26
NPM Version
6.14.18
Node Version
14.21.3
Published on
Jan 09, 2025
Total Downloads
Cumulative downloads
Total Downloads
36,331
Last Day
6.7%
32
Compared to previous day
Last Week
7.2%
223
Compared to previous week
Last Month
6.9%
919
Compared to previous month
Last Year
22.1%
10,035
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
24
React Audio Player
This is a light React wrapper around the HTML5 audio tag. It provides the ability to manipulate the player and listen to events through a nice React interface.
Installation
npm install --save react-custom-audio-player
Usage
import AudioPlayer from 'react-custom-audio-player';
//...
<AudioPlayer src='sample.wav'/>
Example
See the example directory for a basic working example of using this. You can run it with the command npm run example.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| showLoader | Boolean | false | Show loader till file downloads |
| showSeekControls | Boolean | false | Show Forward & Rewind options |
| enableDownload | Boolean | true | Show Button to download Audio file |
| showRunningTimer | Boolean | false | Show Elapsed time |
| showFullDuration | Boolean | false | Show Full Duration of Audio file |
| showRemainingTime | Boolean | false | Show Remaining Duration of Audio file while playing |
| showVolumeSlider | Boolean | false | Controls to Adjust Volume |
| showPlaybackRate | Boolean | false | Controls to Adjust Audio Play Rate |
| customDownloadButton | Boolean | false | Custom Icon for Download button |
| type | String | '' | Type of Audio file Ex: .mp3, .wav |
| filename | String | '' | Audio file name |
| onLoadErrorHandler | Function | error log entry | Custom errror handling function if the audio source is not available |
| theme | String or Object | '{progressBarColor: '#e6e9f0',progressBarFillColor: '#6699ff',}' | Custom theme Options |
Props - Native/React Attributes
See the audio tag documentation for detailed explanations of these attributes.
autoPlay {Bool} [false]
children {Element} [null]
className {String} ['']
controls {Bool} [false]
loop {Bool} [false]
muted {Bool} [false]
preload {String} ['metadata']
src {String} ['']
style {Object} [{}]
Props - Events
listenInterval {Number} [10000]
Indicates how often to call the onListened prop during playback, in milliseconds.
onAbort {Function}
Called when unloading the audio player, like when switching to a different src file. Passed the event.
onCanPlay {Function}
Called when enough of the file has been downloaded to be able to start playing. Passed the event.
onCanPlayThrough {Function}
Called when enough of the file has been downloaded to play through the entire file. Passed the event.
onEnded {Function}
Called when playback has finished to the end of the file. Passed the event.
onError {Function}
Called when the audio tag encounters an error. Passed the event.
onListen {Function}
Called every listenInterval milliseconds during playback. Passed the event.
onPause {Function}
Called when the user pauses playback. Passed the event.
onPlay {Function}
Called when the user taps play. Passed the event.
onSeeked {Function}
Called when the user drags the time indicator to a new time. Passed the event.
onLoadedMetadata {Function}
Called when the metadata for the given audio file has finished downloading. Passed the event.
This is especially useful if you need access to read-only attributes of the audio tag such as buffered and played. See the audio tag documentation for more on these attributes.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
Found 7/8 approved changesets -- score normalized to 8
Reason
2 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 1
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/greetings.yml:1
- Warn: no topLevel permission defined: .github/workflows/nodejs.yml:1
- Warn: no topLevel permission defined: .github/workflows/stale.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/greetings.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/Bala-raj/react-custom-audio-player/greetings.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/Bala-raj/react-custom-audio-player/nodejs.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/Bala-raj/react-custom-audio-player/nodejs.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/Bala-raj/react-custom-audio-player/stale.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/nodejs.yml:22
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
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
license file not detected
Details
- Warn: project does not have a license file
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 29 are checked with a SAST tool
Reason
57 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- 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-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- 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-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Score
3.3
/10
Last Scanned on 2025-02-24
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 MoreOther packages similar to react-custom-audio-player
react-use-audio-player
React hook for building custom audio playback controls
@mux/mux-audio-react
A custom mux audio element for React that Just Works™
customizable-react-audio-player
customizable react audio player
@mike_petrov/react-custom-audio-player
This is a light React wrapper around the HTML5 audio tag. It provides the ability to manipulate the player and listen to events through a nice React interface.