npmpackage.info

Gathering detailed insights and metrics for react-custom-audio-player

Other packages similar to react-custom-audio-player

react-use-audio-player

4.0.2

React hook for building custom audio playback controls

@mux/mux-audio-react

0.15.11

A custom mux audio element for React that Just Works™

customizable-react-audio-player

0.0.3

customizable react audio player

@mike_petrov/react-custom-audio-player

1.1.8

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.

Gathering detailed insights and metrics for react-custom-audio-player

react-custom-audio-player - 1.3.15 | npmpackage.info

react-custom-audio-player

1.3.15

JavaScript

147.43 kB

3.2

Installations

npm install react-custom-audio-player

Developer Guide

BETA

Typescript

No

Module System

N/A

Node Version

14.21.3

NPM Version

6.14.18 Pull Requests

Open

10

Total

40

Closed

3

Merged

27

Issues

Open

1

Total

2

Closed

1

Releases

Unable to fetch releases

Languages

JavaScript

SCSS

JavaScript (55.08%)

SCSS (44.92%)

Developer

Bala-raj

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

4 Stars

171 Commits

7 Forks

4 Watchers

13 Branches

7 Contributors

Updated on Jan 09, 2025

Maintainers

View All 7 Contributors

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

NPM Version

6.14.18

Node Version

14.21.3

Published on

Jan 09, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

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.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

8

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

63 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
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-v6h2-p8h4-qcjw
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-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
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-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
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.2

/10

Last Scanned on 2025-07-07

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

Other packages similar to react-custom-audio-player

Other packages similar to react-custom-audio-player

react-custom-audio-player

Installations

Developer Guide

No

N/A

14.21.3

6.14.18

Pull Requests

10

40

3

27

Issues

1

2

1

Releases

Unable to fetch releases

Languages

Developer

Bala-raj

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Audio Player

Installation

Usage

Example

Props

Props - Native/React 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]

onAbort {Function}

onCanPlay {Function}

onCanPlayThrough {Function}

onEnded {Function}

onError {Function}

onListen {Function}

onPause {Function}

onPlay {Function}

onSeeked {Function}

onLoadedMetadata {Function}

10

10

8

0

0

0

0

0

0

0

0

0

3.2

/10