Level Meter

level-meterViewers

One bar per channel, in either orientation. The bar follows RMS — what you hear as loudness — while a thin tick marks the recent peak and bleeds back down, because on percussive material the peak is gone long before the eye catches it. Takes an analyser, a data callback, or levels your engine already computed.

Synthetic signal for display only — this demo produces no audio.

Install

Copies the source into your project. Anything it depends on comes with it.

$ npx shadcn add @syntho-ui/level-meter

Pulls in

use-audio-sourcecontrol-theme

First time? Add the registry to your components.json once:

components.json

{
  "registries": {
    "@syntho-ui": "https://engine.syntho.app/r/{name}.json"
  }
}

Usage

Controlled or uncontrolled, whichever suits the surrounding state.

example.tsx

import { LevelMeter } from "@/components/ui/level-meter"

<LevelMeter
  analyser={analyserNode}
  channels={2}
  labels={["L", "R"]}
  showScale
  segments={12}
/>

Props

Prop	Type	Default	Description
analyser	AnalyserNode	—	A live analyser to read from. The component only ever reads it.
getData	(target: Float32Array) => boolean \| void	—	Fill the array with the current frame instead of using an analyser.
value	number[]	—	Pre-computed levels per channel as amplitude 0..1. Bypasses the analyser entirely.
channels	number	1	Number of bars when metering from an analyser.
orientation	"vertical" \| "horizontal"	"vertical"	Which way the bars run.
length	number	120	Long axis in pixels.
thickness	number	10	Width of each bar in pixels.
segments	number	0	Draw as discrete LED segments rather than a continuous gradient.
peakDecay	number	0.6	Peak-hold decay in full-scale units per second. 0 hides the tick.
minDecibels / maxDecibels	number	-60 / 0	The dB range the bar spans.
showScale	boolean	false	Show a dB scale beside the bars.
labels	string[]	—	Channel captions, e.g. ["L", "R"].

Interaction

Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
Double-click resets to defaultValue.
Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
Proper slider and switch roles with live aria-valuetext, so a screen reader announces the formatted value rather than the raw number.
The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.

All controls Start building