Gain Reduction Meter
gain-reduction-meterViewersCompressor metering: IN and OUT bars, GR hanging from the top.
$ pnpm dlx shadcn@latest add @pluginui/core-gain-reduction-meterLoading interactive preview…
Install
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
use-audio-sourcecontrol-theme
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-gain-reduction-meter.jsonUsage
Connect the documented props to your application or host.
import { GainReductionMeter } from "@/components/ui/gain-reduction-meter"
// One compressor, tapped before and after:
const compressor = new DynamicsCompressorNode(context, { threshold: -24, ratio: 4 })
const inputAnalyser = new AnalyserNode(context)
const outputAnalyser = new AnalyserNode(context)
source.connect(inputAnalyser)
source.connect(compressor)
compressor.connect(outputAnalyser)
compressor.connect(context.destination)
<GainReductionMeter
getLevels={() => ({ reduction: compressor.reduction })}
inputAnalyser={inputAnalyser}
outputAnalyser={outputAnalyser}
segments={16}
showScale
/>About Gain Reduction Meter
The three bars on a compressor's front panel. Input and output level use the usual dB scale. Between them, the gain-reduction bar fills from the top downward, following the hardware convention for showing what is being taken away; a peak-hold tick marks the deepest recent bite. Supply dB values you already have, a per-frame callback (DynamicsCompressorNode.reduction works directly), or a pair of analysers for the level bars. Every column is optional, so a lone GR bar works too.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| levels | { input?: number; output?: number; reduction: number } | — | Levels you already computed, in dB (reduction ≤ 0). Highest precedence: any field given here overrides the same field from getLevels or the analysers. |
| getLevels | () => { input?: number; output?: number; reduction: number } | — | Polled once per animation frame. The DynamicsCompressorNode hook: () => ({ reduction: compressor.reduction }). |
| inputAnalyser / outputAnalyser | AnalyserNode | — | RMS dB for the IN / OUT bars is computed from these values each frame. Read-only. Analysers cannot report reduction, so the GR bar still needs levels or getLevels. |
| paused | boolean | false | Stop polling and hold the last frame. |
| showInput / showReduction / showOutput | boolean | true | Which columns render. Turn IN and OUT off for a lone GR bar. |
| orientation | "vertical" | "horizontal" | "vertical" | Which way the bars run. GR fills from the top downward when vertical, from the right edge inward when horizontal. |
| length | number | 120 | Long axis in pixels. |
| thickness | number | 10 | Width of each bar in pixels. |
| segments | number | 0 | Draw as discrete LED segments; 0 is a continuous bar. Segment colours belong to their scale position, hardware-style. |
| showScale | boolean | false | dB tick labels: the level scale on one side, the GR scale on the other. |
| showLabels | boolean | true | Show the IN / GR / OUT captions. |
| labels | { input?: string; reduction?: string; output?: string } | — | Caption overrides, e.g. { reduction: "COMP" }. |
| minDecibels / maxDecibels | number | -60 / 0 | The dB range the level bars span. |
| minReduction | number | -24 | Deepest reduction the GR scale shows, in dB (negative). |
| zones | { amber?: number; red?: number } | { amber: -18, red: -6 } | Where the level bars turn amber and red, in dB. |
| peakDecay | number | 0.6 | GR peak-hold decay in full-scale units per second. 0 hides the tick. |
| colors | { low?; mid?; high?; reduction?; peak? } | — | Per-part colour overrides. Defaults read --uikit-meter-low/-mid/-high with traffic-light fallbacks; the GR bar uses the theme accent. |
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
sliderandswitchroles with livearia-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.