JDS.

Search docs

Find a page or component

Waveform

Live spectrum bars for microphone input or agent speech.

Installation

pnpm dlx shadcn@latest add @jds/waveform

Usage

import { Waveform } from "@/components/voice/waveform"
import { useAudioLevel } from "@/hooks/use-audio-level"

const mic = useAudioLevel()

<Waveform spectrum={mic.spectrum} active={mic.active} />

API Reference

Waveform

PropTypeDefault
spectrum

One value 0 to 1 per bar.

number[]–
active

Inactive bars flatten and dim.

booleantrue

useAudioLevel

PropTypeDefault
bands

Number of spectrum bands.

number24
returns

Call start() from a user gesture.

{ level, spectrum, active, error, start, stop }–