SIG—03 Signature system
Waveform
Audio you can see and scrub: a waveform over a native audio element, with chapters, speed, skips and an imperative handle.
Live — this one is real
The composition is generated in your browser and decoded into its waveform. Press K to play, J and L to skip, [ and ] for chapters.
ComposingRendering 48 seconds of audio offline…
Usage
import { Waveform } from "mizu-ui";
export function Example() {
return (
<Waveform src="/audio/calibration.wav" label="Calibration tone, 440 Hz" />
);
}
This code, running — no configuration beyond the data
0:00—:—
Arrow keys seek five seconds, Shift thirty. Space plays or pauses. J and L skip ten seconds; brackets move between chapters.
Keyboard
- SpaceK
- Play or pause (on the waveform)
- ←→
- Seek five seconds (Shift: thirty)
- JL
- Back or forward ten seconds
- []
- Previous or next chapter
- HomeEnd
- Start or end
Source & setup
Add this component to your project with the shadcn CLI. The command copies its source and styles into your configured UI directory.
npx shadcn@latest add 0xuser64bit/mizu/waveformFor npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion.
Inspect signature/Waveform.tsx
Source is included in the npm package under src/signature/Waveform.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src / label | string | — | Playable source and accessible name. |
| peaks | number[] | — | Normalised 0–1 amplitudes. Omit to decode from the source (same-origin or CORS-enabled). |
| markers | WaveformMarker[] | — | Chapters or comments: id, time in seconds and label. Listed beneath with durations. |
| duration | number | — | Seconds to show before the media reports its own. |
| rates / height | number[] / number | [1, 1.25, 1.5, 2] / 72 | Speed cycle and waveform height. |
| onTimeUpdate / onPlayingChange | function | — | Follow playback, e.g. to highlight a transcript. |
| ref | WaveformHandle | — | play(), pause() and seek(seconds) for external controls. |
Accessibility
The waveform is a slider with readable time (“1:14 of 42:10”); arrows seek five seconds, Shift thirty. Play, skip and speed are labelled buttons, chapters are a real list with the current one marked. A failed source is announced with a retry. Letter shortcuts only apply while focus is inside the player.
Motion
The waveform prints left to right once measured; while decoding, bars breathe in a travelling wave. The play glyph morphs into pause. Reduced motion keeps every state and removes the travel.