Level meterPro
A segmented level meter, vertical or horizontal, mono or stereo, with peak hold and a clip light, read every frame without re-rendering.
On this page
ProStereo, vertical and horizontal, with peak hold and a clip light that latches until pressed.
Installation
Usage
import { LevelMeter } from "@/components/ui/chatcn/pro/level-meter"
<LevelMeter level={() => analyserPeak()} scale />Pass amplitude from 0 to 1, an array for several channels, or a getter. Segments are green while safe, amber from -12 dB and red from -3 dB; the clip light latches at full scale until pressed. It stops reading while the tab is hidden.
Examples
States
ProSilent, safe, near the limit, clipping and horizontal.
Props
| Prop | Type | Notes |
|---|---|---|
level | LevelReading | () => LevelReading | Required. Amplitude, not dB |
orientation | "vertical" | "horizontal" | Default vertical |
segments, floor | number | Default 24 or 32, and -60 dB |
peakHold, clipLight, scale | boolean | Default true, true, false |
size | "sm" | "md" | Default md |
labels | Partial<LevelMeterLabels> | Every string the meter shows or announces, for translation |
Keyboard
| Key | Action |
|---|---|
Enter on the clip light | Clear it |
Accessibility
- A
meterfrom -60 to 0 dB; its spoken value updates twice a second, never per frame. - Zones have position as well as color, and forced colors draw lit segments in the system ink.
Motion
- Segments rise at once and fall at 24 dB a second; the peak marker holds 1.2 s. Reduced motion follows the level directly.