audiocnSolid

useWaveformData

Decode an audio file and reduce it to cached waveform peaks.

$ pnpm dlx shadcn@latest add @audiocn-solid/use-waveform-data

Usage

const waveform = useWaveformData("/episode.mp3", { samples: 800 });

<Waveform
  loading={waveform.status === "loading"}
  peaks={waveform.peaks}
  duration={waveform.duration}
/>;

Peaks are the loudest sample in each slice, normalised so the loudest slice is 1. Results are cached per file and sample count. src can also be an AudioBuffer.

Pass an accessor for a changing source or sample count. Read the returned fields in JSX so changes stay reactive.

Options

Prop

Type

Returns

Prop

Type

computePeaks(buffer, samples) is exported for use outside Solid.