KQ-887 · AUDIO/WAVE

Audio Wave

An audio attachment in a thread, with a seeded waveform that fills bar by bar. As the position crosses a bar that bar wakes to its full level and colour on flick, the fastest spring in the set, so the fill arrives like the sound passing rather than a wipe sliding over a picture, while the head follows on a linear tween matched to the host's tick. The rate control rolls a column of faces one face on snap; the wave is a real slider where Left and Right step five seconds, Up and Down one, and Home and End jump.

KQ-887 · AUDIO/WAVE

Roof deck walkthrough
11:02
Answer on the parapet
11:19

Idle · 0:00 held · 1×

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/audio-wave

Props

clips: AudioClip[]; default —; The thread, oldest first: id, side, title, seconds, seed, time and delivery.
playingId: string | null; default null; The clip the host is playing; playback lives in the host, never in the component.
positions: Record<string, number>; default —; Seconds played per clip id; a clip with no entry sits at zero.
onPlayRequest: (id: string, playing: boolean) => void; default —; Fires from a transport press; the host decides what plays.
onSeek: (id: string, seconds: number) => void; default —; Fires from a scrub, a tap on the wave, or an arrow key, in whole seconds.
speed / defaultSpeed: number; default 1; Controlled or initial playback rate; one of speeds.
onSpeedChange: (speed: number) => void; default —; Fires as the label rolls to the next rate.
speeds: number[]; default [1, 1.5, 2]; The rates the control cycles through.
bars: number; default 36; Bars drawn per waveform; the profile is seeded, so it never changes shape.
followMs: number; default 100; How long the head takes to reach a new position; match the host's tick.
peerName: string; default "Them"; Names the other side in the group and delivery sentences.
label: string; default —; Names the thread list for assistive technology.

Prop	Type	Default	Description
clips	AudioClip[]	—	The thread, oldest first: id, side, title, seconds, seed, time and delivery.
playingId	string \| null	null	The clip the host is playing; playback lives in the host, never in the component.
positions	Record<string, number>	—	Seconds played per clip id; a clip with no entry sits at zero.
onPlayRequest	(id: string, playing: boolean) => void	—	Fires from a transport press; the host decides what plays.
onSeek	(id: string, seconds: number) => void	—	Fires from a scrub, a tap on the wave, or an arrow key, in whole seconds.
speed / defaultSpeed	number	1	Controlled or initial playback rate; one of speeds.
onSpeedChange	(speed: number) => void	—	Fires as the label rolls to the next rate.
speeds	number[]	[1, 1.5, 2]	The rates the control cycles through.
bars	number	36	Bars drawn per waveform; the profile is seeded, so it never changes shape.
followMs	number	100	How long the head takes to reach a new position; match the host's tick.
peerName	string	"Them"	Names the other side in the group and delivery sentences.
label	string	—	Names the thread list for assistive technology.