Audio UI
An audio value as a DAW shows it, in monospace figures that do not jump as they change: 120.00 BPM, -6.0 dB, 1.2 kHz, L 30, 50 %, +3 st, 1:02.345.
Installation
pnpm dlx shadcn@latest add @audio-ui/value-display
Usage
import { formatValue, ValueDisplay } from "@/components/audio-ui/value-display";
<ValueDisplay kind="db" label="Gain" value={gain} />
// The same text, for a title or an announcement.
formatValue(gain, "db");kind | Value | Reads |
|---|---|---|
bpm | beats per minute | 120.00 BPM |
db | decibels, -Infinity for silence | -6.0 dB, -∞ dB |
hz | hertz | 440 Hz, 1.2 kHz |
pan | -1 to 1 | L 30, C, R 100 |
percent | 0 to 1 | 50 % |
semitones | semitones | +3 st |
time | seconds | 1:02.345 |
API reference
Props · 4
The value.
How it reads: a tempo, a level, a frequency, a pan, a share, a pitch, a time.
Names it for assistive technology, which reads it with its value: "Cutoff".
"lg" for the main value of a panel.