Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
react-use-audio-player
Advanced tools
Readme
A custom React hook for controlling browser audio playback
yarn add react-use-audio-player
For convenience, the library's type definitions are included in the package under index.d.ts
.
This library exports a context Provider and two hooks for controlling an audio source, giving you the tools you need to build you own audio player or visualization.
AudioPlayerProvider
This Provider is required for the hooks to function.
The Provider contains a single audio source and exposes an interface for manipulating it via the useAudioPlayer
hook.
The benefit of having a single, shared audio source is that it allows the developer to compose together multiple components that share knowledge about the audio.
For example, you may have separate components PlayPauseButton
, SeekBar
and VolumeControls
all working together on the same audio source.
import React from "react"
import { AudioPlayerProvider } from "react-use-audio-player"
const App = () => {
return (
<AudioPlayerProvider>
<AudioPlayer file="meow.mp3" />
</AudioPlayerProvider>
)
}
useAudioPlayer
This is the main hook for controlling your audio instance.
Example:
import React from "react"
import { useAudioPlayer } from "react-use-audio-player"
const AudioPlayer = ({ file }) => {
const { play, pause, ready, loading, playing } = useAudioPlayer({
src: file,
format: "mp3",
autoplay: false
})
const togglePlay = () => {
if (playing) {
pause()
} else {
play()
}
}
if (!ready && !loading) return <div>No audio to play</div>
if (loading) return <div>Loading audio</div>
return (
<div>
<button onClick={togglePlay}>{playing ? "Pause" : "Play"}</button>
</div>
)
}
audioPlayerConfig: { src: string, format?: string, autoplay?: boolean }
autoplay
and format
are optional. autoplay
will default to false.useAudioPlayer
returns a single object containing the following members:
loading: boolean
true if audio is being fetched
ready: boolean
true if the audio has been loaded and can be played
playing: boolean
true is the audio is currently playing
stopped: boolean
true if the audio has been stopped
error: Error
set when audio has failed to load
play: () => void
plays the loaded audio
pause: () => void
pauses the audio
stop: () => void
stops the audio, returning the position to 0
seek: (position: number) => void
sets the position of the audio to position (seconds)
mute: () => void
mutes the audio
useAudioPosition
This hooks exposes the current position and duration of the audio instance as its playing in real time.
This data may be useful when animating a visualization for your audio like a seek bar.
A separate hook was created to manage this state in order to avoid many rerenders of components that don't need the live data feed.
For example a component that renders a play/pause button may use useAudioPlayer
but does not need to rerender every time the position of the playing audio changes.
import React from "react"
import { useAudioPosition } from "react-use-audio-player"
const PlayBar = () => {
const { position, duration } = useAudioPosition()
const [percent, setPercent] = React.useState(0)
React.useEffect(() => {
setPercent((position / duration) * 100 || 0)
}, [position, duration])
return <ProgressBar percentComplete={percent} />
}
useAudioPosition
returns an object containing the following members:
position: number
the current playback position of the audio in seconds
duration: number
the total length of the audio in seconds
To run the example applications follow the following steps:
git clone
the repositorycd useAudioPlayer/examples
yarn install
yarn start
A basic eslint configuration has been set up but should be expanded with more rules.
Code style and formatting is handled by Prettier. The formatter will run pre-commit to ensure consistent style between contributers.
FAQs
React hook for building custom audio playback controls
We found that react-use-audio-player demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.