audiocn

useAudioPlayer

Playback state for an audio element the hook owns.

$ pnpm dlx shadcn@latest add @audiocn/use-audio-player

Usage

const player = useAudioPlayer({ src: "/episode.mp3" });

<Button onClick={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

Prop

Type

Returns

Prop

Type