Level Meter
A segmented live input-level meter for a recording — Web Audio RMS from a MediaStream, or a level you drive.
- Status
- Since
0.25.0- Accessibility pattern
- role="meter" with a rounded aria-valuenow
Last updated
Install
Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Level Meter before installation. Retain the digest printed by this command.
pnpm exec vegastack-design verify level-meterInstall with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.
pnpm dlx shadcn@4.21.0 add @vegastack/level-meterRun the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.
Usage
import { LevelMeter } from "@/components/ui/level-meter";
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
<LevelMeter stream={stream} active={!paused} />;The meter reads the stream through an AnalyserNode, maps floor dBFS…0 dBFS onto its segments,
rises at once and falls slowly so a short peak stays readable. It never stops the stream's tracks —
the recorder owns them. The top two segments are the warning zone and the last one is clipping.
Examples
Levels
Microphone
For playback, the waveform scrubber is part of Audio Player
(variant="waveform", with optional precomputed peaks).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | true | Whether the meter is listening. A paused or muted recorder passes false: the segments go
dark and the analyser stops reading. |
aria-label | string | "Input level" | The meter's accessible name. |
floor | number | -60 | The quietest level the meter shows, in dBFS; anything below it is silence. |
level | number | 0 | A level from 0 (silence) to 1 (full scale), for a host that measures itself. Ignored while
stream is set. |
segments | number | 12 | How many segments the meter has. |
stream | MediaStream | null | — | The live input to meter. While set, the meter listens to it; when it changes or unmounts the audio graph is closed. The stream's tracks are never stopped — the recorder owns them. |
Data attributes and CSS variables on LevelMeter
| Attribute | Values |
|---|---|
data-on | "" |
data-slot | "level-meter" | "level-meter-segment" |
data-state | "active" | "inactive" |
data-zone | mirrors a prop or state value |
Accessibility
- The root is
role="meter", named "Input level" by default, witharia-valuenowas a whole percentage of lit segments — it changes only when a segment does, not every frame. - The segments are
aria-hidden; colour is never the only signal, the count of lit segments is. - The meter keeps moving under reduced motion: it is information, and it has no transitions.
| Contract | States tested |
|---|---|
| Behaviour | default, active, inactive |
| Accessibility | meter, semantic-html |
| Visual | default, ok, hot, clip |