audiocnuseAudioPlayer
Playback state for an audio element the hook owns.
$ pnpm dlx shadcn@latest add @audiocn-solid/use-audio-playerUsage
const player = useAudioPlayer({ src: "/episode.mp3" });
<Button onClick={() => void player.toggle()}>
{player.playing ? "Pause" : "Play"}
</Button>;
<Waveform
peaks={peaks}
duration={player.duration}
time={player.time}
onSeekCommitted={player.seek}
/>;The hook creates and owns an <audio> element. Pass player.element to useAudioAnalyser or useWebAudioMixer, and player to AudioPlayer.
Options accept getters or an accessor. Keep the controller intact so its reactive fields stay live:
const player = useAudioPlayer(() => ({ src: selectedTrack().src }));Options
Prop
Type
Returns
Prop
Type