Voice Waveform
A live recording waveform whose bars track the microphone level, so a voice control visibly reacts as the person speaks.
<VoiceWaveform level={recorder.level} />Usage
import { VoiceWaveform } from "@reva/ui";VoiceWaveform renders a scrolling row of bars whose heights follow the mic input level (0–1) — a useAudioRecorder().level, or any amplitude signal you have. It samples the level on a fixed cadence into a rolling buffer, so the waveform scrolls steadily and stays legible through pauses. It replaces a static "recording" dot with something that visibly responds to the voice, making it clear the audio is being captured — it's what PromptInputVoiceButton shows while recording.
Because the mic RMS level runs low for ordinary speech, VoiceWaveform amplifies it (and lifts quiet levels) before mapping to bar height, so speech fills the range without any caller tuning. It updates ~12 times a second but is self-contained, so it re-renders only itself — you can hold it beside high-frequency recorder state without re-rendering the surrounding composer.
Decorative by design
The waveform is aria-hidden — it carries nothing a screen reader needs. Announce the recording state separately (a visually-hidden role="status" "Recording"), the way PromptInputVoiceButton does.
Examples
Level
The bar heights track level. Drag to see the mapping: quiet input keeps a low line, louder input fills the bars. In the app this value comes live from the microphone.
<VoiceWaveform level={level} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
level | number | — | Live mic input level, 0–1 — e.g. useAudioRecorder().level. Clamped and amplified internally, so out-of-range or low values are handled. |
Audio Attachment
An audio message or voice note — a compact AudioPlayer with an optional upload spinner, error glyph, and remove control, for chat composers and transcripts.
Attachment Chip
A file attachment chip — a status-aware label with an optional image thumbnail and a hover preview (image, PDF, or file summary). Shared by the chat composer and sent-message rows.