Vocoder Panel

vocoder-panelControls

Live filter-bank levels and compact vocoder controls.

$ pnpm dlx shadcn@latest add @pluginui/core-vocoder-panel
Loading 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

knobcontrol-theme
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-vocoder-panel.json

Usage

Connect the documented props to your application or host.

example.tsx
import { VocoderPanel } from "@/components/ui/vocoder-panel"

const [values, setValues] = useState(initialVocoderValues)

<VocoderPanel
  values={values}
  onChange={(patch) => setValues((current) => ({ ...current, ...patch }))}
/>
About Vocoder Panel

A controlled vocoder panel with 8/12/16 bands, frequency ranges, Q, envelope, gain, and mix. The live view plots processor-supplied input envelopes and wet-output RMS on a fixed −72 to 0 dBFS scale against logarithmic frequency. It never analyzes audio or normalizes frames. Without measurements, only the configured band centers are shown.

Props

PropTypeDefaultDescription
valuesVocoderValues—The complete controlled state: band count, two frequency ranges, Q slope, envelope times, output gain, and wet mix.
onChange(patch: Partial<VocoderValues>) => void—Receives a minimal patch from a gesture. The host remains the owner of audio, automation, undo, and persistence.
analysisVocoderBandAnalysis | null—Actual inputHz/outputHz band centers, inputEnvelope amplitudes, and outputRms amplitudes in linear full scale. Output is wet only, after gain and mix. Arrays must contain the same number of bands.
analysisState"idle" | "unavailable""unavailable"Small status label shown when there is no current processor frame.
widthnumber | string680Panel width; remains responsive down to its container.

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 controlsStart building