components / waveform
waveform.
a track's amplitude envelope with the played portion filled in, seekable by click. bars are elements rather than a canvas — crisp at every dpr, hoverable, and the fill is a css transition instead of a repaint loop. ships samplePeaks() to downsample raw pcm.
seekable
38% — click anywhere on the wave
mirrored, taller bars
inline, unplayed
installation
bunx @justin06lee/chrome@latest add waveformprops
| name | type | default | description |
|---|---|---|---|
| peaks * | number[] | - | peak amplitudes 0–1, left to right; one entry per bar. samplePeaks() builds these from pcm. |
| progress | number | 0 | how far through, 0–1. |
| onSeek | (ratio: number) => void | - | makes the waveform seekable; ratio is 0–1. |
| height | number | 48 | height in px. |
| barWidth | number | 3 | widest a bar may get; bars flex to fill the container up to this. |
| gap | number | 2 | gap between bars in px. |
| mirror | boolean | false | mirror each bar around the centre line instead of standing it on the floor. |
| accent | string | '#fff' | css color of the played bars. |
| floor | number | 0.06 | shortest bar as a fraction of the tallest, so silence still has a spine. |
| ariaLabel | string | 'waveform' | |
| className | string | - |