Waveform

A responsive audio visualizer that supports static wave rendering, interactive scrubbing, and live microphone capture.

Preview

Loading Preview...

bun add xiod-ui

1import {2  Waveform,3  WaveformVisual,4  WaveformScrubber,5  WaveformHandle6} from "xiod-ui/waveform";

1<Waveform>2  <WaveformVisual />3  <WaveformScrubber />4  <WaveformHandle />5</Waveform>

Detailed documentation of properties and options.

Prop	Type	Default
`value`	`number` \|`undefined`	-
`defaultValue`	`number` \|`undefined`	-
`onValueChange`	`((value: number) => void)` \|`undefined`	-
`duration`	`number` \|`undefined`	`1`
`active`	`boolean` \|`undefined`	`false`
`processing`	`boolean` \|`undefined`	`false`
`mode`	`"static"` \|`"scrolling"` \|`"live"` \|`undefined`	`static`
`microphone`	`boolean` \|`undefined`	`false`
`deviceId`	`string` \|`undefined`	-
`barWidth`	`number` \|`undefined`	`3`
`barGap`	`number` \|`undefined`	`2`
`barRadius`	`number` \|`undefined`	`1.5`
`barColor`	`string` \|`undefined`	-
`progressColor`	`string` \|`undefined`	-
`fadeEdges`	`boolean` \|`undefined`	`true`
`fadeWidth`	`number` \|`undefined`	`24`
`sensitivity`	`number` \|`undefined`	`1`
`updateRate`	`number` \|`undefined`	`30`
`seed`	`number` \|`undefined`	`42`
`data`	`number[]` \|`undefined`	-

Prop	Type	Default	Description
`render`	`ReactElement<unknown, string` \|`JSXElementConstructor<any>>` \|`ComponentRenderFn<HTMLProps, {}>` \|`undefined`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.