
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
react-audio-player
Advanced tools
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.
npm install --save react-audio-player
Also be sure you have react
and react-dom
installed in your app at version 15 or above.
import ReactAudioPlayer from 'react-audio-player';
//...
<ReactAudioPlayer
src="my_audio_file.ogg"
autoPlay
controls
/>
See the example directory for a basic working example of using this project. To run it locally, run npm install
in the example directory and then npm start
.
See the audio tag documentation for detailed explanations of these attributes.
Prop | Type | Default | Notes |
---|---|---|---|
autoPlay | Boolean | false | --- |
children | Element | null | --- |
className | String | empty string | --- |
controls | Boolean | false | --- |
crossOrigin | String | empty string | See MDN's article on CORS for more about this attribute. |
controlsList | String | empty string | For Chrome 58+. Only available in React 15.6.2+ |
id | String | empty string | --- |
loop | Boolean | false | --- |
muted | Boolean | false | --- |
volume | Number | 1.0 | --- |
preload | String | 'metadata' | --- |
src | String | empty string | --- |
style | Object | --- | --- |
Prop | Type | Description |
---|---|---|
listenInterval | Number | Indicates how often to call the onListened prop during playback, in milliseconds. Default is 10000. |
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. |
onVolumeChanged | Function | called when the user changes the volume, such as by dragging the volume slider |
onLoadedMetadata | Function | called when the metadata for the given audio file has finished downloading. Passed the event. |
You can get direct access to the underlying audio element. First get a ref to ReactAudioPlayer:
<ReactAudioPlayer
ref={(element) => { this.rap = element; }}
/>
Then you can access the audio element like this:
this.rap.audioEl
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.
FAQs
A simple React wrapper for the audio tag
The npm package react-audio-player receives a total of 28,293 weekly downloads. As such, react-audio-player popularity was classified as popular.
We found that react-audio-player demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.