Audio meter

Shows supplied channel levels and peaks in decibels, with bounded native meters and explicit missing readings.

Preview

Output

Left-12 dB

-12 dB

Peak: -3 dB

Right-15 dB

-15 dB

Peak: -4 dB

In action

Read the output

Mix bus · supplied snapshot

Stereo output

Left-12.4 dB

-12.4 dB

Peak: -3.2 dB

Right-14.1 dB

-14.1 dB

Peak: -4.8 dB

Levels and peaks come from the audio host.

When to use

Use it for

Live or recorded decibel readings supplied by an audio host.
min and max to set the visible scale; supplied readings remain visible as text.
Negative infinity for digital silence, and null for an unavailable level.

Not for

Expecting microphone access, audio analysis, or automatic peak holding.
Treating a missing reading as silence or zero decibels.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { AudioMeter } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/audio-meter.

2. Vendor the source

npx @noorddev/vlak-cli add audio-meter

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/audio-meter.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { AudioMeter } from "@noorddev/vlak-react";

<AudioMeter label="Output" channels={[{ id: "left", label: "Left", level: -12, peak: -3 }, { id: "right", label: "Right", level: -15, peak: -4 }]} />

Props

AudioMeter

Supplied channel levels and peaks; no audio analysis or peak holding.

Prop	Type	Default
`label`required	`ReactNode`
`channels`required	`AudioMeterChannel[]`
`min`	`number`	`-60`
`max`	`number`	`0`

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

Each native meter has a channel name, minimum, maximum, and decibel value text.
Supplied peaks are visible text; absent and invalid readings suppress the meter.
Native meter styles remove browser gradients so the track and fill remain monochrome. System colors retain visible fill and boundaries in forced colors.
The ref and native attributes reach the root div.

Markup

<div class="rs-audio-meter"><p class="rs-audio-meter-label">Output</p><div class="rs-audio-meter-channel"><div class="rs-audio-meter-text"><span id="left-channel">Left</span><span>-12 dB</span></div><meter class="rs-audio-meter-bar" min="-60" max="0" value="-12" aria-labelledby="left-channel">-12 dB</meter><p class="rs-audio-meter-note">Peak: -3 dB</p></div></div>

Classes

.rs-audio-meter.rs-audio-meter-label.rs-audio-meter-channel.rs-audio-meter-text.rs-audio-meter-bar.rs-audio-meter-note