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 powered by the amazing howler.js library. The intention of this package is to abstract away the details of howler's API using built-in React primitives to create an interface that is more React-friendly, allowing you to write React code that is free from audio-related side-effects.
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 { togglePlayPause, ready, loading, playing } = useAudioPlayer({
src: file,
format: "mp3",
autoplay: false
})
if (!ready && !loading) return <div>No audio to play</div>
if (loading) return <div>Loading audio</div>
return (
<div>
<button onClick={togglePlayPause}>{playing ? "Pause" : "Play"}</button>
</div>
)
}
(optional) 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:
load: ({ src: string, format?: string, autoplay?: boolean }) => void
method to lazily load audio
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
togglePlayPause: () => void
convenient equivalent to alternating calls to play
and pause
stop: () => void
stops the audio, returning the position to 0
seek: (position: number) => number | undefined
sets the position of the audio to position (seconds)
mute: () => void
mutes the audio
volume: (value: number) => number
get/set the volume of the current sound. Volume values between 0.0 and 1.0
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({ highRefreshRate: true })
const [percent, setPercent] = React.useState(0)
React.useEffect(() => {
setPercent((position / duration) * 100 || 0)
}, [position, duration])
return <ProgressBar percentComplete={percent} />
}
(optional) config: { highRefreshRate: boolean }
highRefreshRate
will allow useAudioPosition to update state at a smooth 60fps rate
via the browser's requestAnimationFrame API. This is ideal for when you want smoother animations.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
seek
For convenience the seek
method from useAudioPlayer is also returned from this hook
To run the example applications follow the following steps:
git clone
the repositorycd useAudioPlayer/examples
yarn install
yarn start
The most basic npm release strategy is being followed for now. A good explanation can be found here.
Steps
yarn/npm version
(preversion script will ensure code is tested and built)yarn/npm publish
git push
& git push --tags
FAQs
React hook for building custom audio playback controls
The npm package react-use-audio-player receives a total of 6,705 weekly downloads. As such, react-use-audio-player popularity was classified as popular.
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.