Needle meter

A VU meter reads the level of a signal the way an engineer's ear does, as a slow average, not as peaks. The dial runs from -20 to +3 VU with the part above 0 VU in red, and the needle follows the first channel of a source. It is turned straight in the DOM on every frame, so the dial does not re-render with the signal.

Installation

bunnpmpnpmyarn
Copy
pnpm dlx shadcn@latest add @audio-ui/needle-meter

Usage

It takes the same live source as Meter, such as the one use-audio-levels makes.

Copy
import { NeedleMeter } from "@/components/audio-ui/needle-meter";

<NeedleMeter aria-label="Output" reference={-18} source={levels} />;

The standard fixes no level for 0 VU: a studio aligns it to one of its own. reference is the level of the source, in dB, that reads 0 VU, and the caption shows it. -18 is a common one for digital audio.

The standard

The dial and the needle follow the VU meter standard, ANSI C16.5 and IEC 60268-17.

• Marks: -20, -10, -7, -5, -3, -2, -1, 0, +1, +2 and +3 VU.
• Spacing: the needle follows the voltage of the signal, not its dB, so 0 VU sits at 71% of the dial and -20 VU at 7%, and the marks crowd toward the top.
• Ballistics: the needle first reaches 99% of a step in 300 ms and overshoots it by 1.3%, and falls as it rises.
• Rest: with no signal the needle rests at the left stop, below -20 VU.

For a dial of your own, @audio-ui/core/meter has the two parts: vuDeflection gives the position of a mark, with levelPosition from Number.NEGATIVE_INFINITY to +3, and createVuBallistics the movement of the needle.

Accessibility

The dial is an image with the name you give it. The needle and the reading move too fast to announce, so they are not read out.

API reference

NeedleMeter