Syntho

Vocoder Panel

vocoder-panelControls

A complete controlled face for the clean-room channel vocoder. It uses the same Knob, Spectrum, theme, spacing, and interaction conventions as the rest of the kit while preserving the useful 8/12/16-band, range, Q, envelope, source, gain, mix, transform, and spectrum taxonomy. The mapping view explicitly shows which speech-analysis band drives which carrier band, and the pure model exports the exact parameter order consumed by the kernel.

CHANNEL VOCODER
Modulator envelopes reshape the incoming carrier
ANALYSIS / MODULATORCARRIER / EXCITER
120 Hz
12.00 kHz
120 Hz
12.00 kHz
4.00
8.00
8.00 ms
80.00 ms
0.0 dB
100%

Install

Copies the source into your project. Anything it depends on comes with it.

$ npx shadcn add @syntho-ui/vocoder-panel

Pulls in

knobspectrumcontrol-theme

First time? Add the registry to your components.json once:

components.json
{
  "registries": {
    "@syntho-ui": "https://engine.syntho.app/r/{name}.json"
  }
}

Usage

Controlled or uncontrolled, whichever suits the surrounding state.

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

const [values, setValues] = useState(initialVocoderValues)

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

Props

PropTypeDefaultDescription
valuesVocoderValues—The complete controlled state: band count, two frequency ranges, Q slope, envelope times, output, source, and display mode.
onChange(patch: Partial<VocoderValues>) => void—Receives a minimal patch from a gesture. The host remains the owner of audio, automation, undo, and persistence.
carrierSpectrumDbreadonly number[]—Optional carrier FFT bins in dB, rendered by the kit's standard Spectrum component.
modulatorSpectrumDbreadonly number[]—Optional speech/modulator FFT bins in dB, rendered by the kit's standard Spectrum component.
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