Waveform

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn/waveform

UsageCopy Anchor Link

import { Waveform } from "@/components/ui/waveform";

const player = useAudioPlayer({ src });
const { peaks, duration } = useWaveformData(src);

<Waveform
  duration={duration}
  onSeekCommitted={player.seek}
  peaks={peaks}
  time={player.time}
/>;

Pass time (a frame source) for a playhead that moves every frame without re-rendering React, or currentTime for plain controlled use.

AnatomyCopy Anchor Link

<Waveform>
  <WaveformCanvas />
  <WaveformCursor />
  <WaveformHover />
  <WaveformRegion />
  <WaveformMarker />
</Waveform>

ExamplesCopy Anchor Link

VariantsCopy Anchor Link

Regions and markersCopy Anchor Link

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

When interactive, the waveform is a slider with aria-valuetext such as "1:24 of 3:40". Arrow keys seek by step, Shift by largeStep, and Home and End jump to the ends. Region edges are separate sliders.

API referenceCopy Anchor Link

WaveformCopy Anchor Link

WaveformRegionCopy Anchor Link

WaveformMarkerCopy Anchor Link