Skip to content

Audio controls

The controls of audio-plugin UIs, in @contour-ui/react next to the everyday components.

Audio is the section of the controls of a plugin interface: knobs, faders, meters, spectrum displays and value readouts. They ship in @contour-ui/react, next to the everyday components, and follow the same themes and tokens. Knob is the first of them; faders, meters and the others come next, and their pages will appear here.

Knob

A rotary control for the parameters of a plugin, turned by a drag, the wheel or the keys.

Setup

They need no setup of their own: install @contour-ui/react and load its stylesheet, as Installation shows.

Conventions

  • Readouts use the value text style: monospace, so numbers do not shift while the value changes. The formatters of @contour-ui/react write them as plugins show them, without Intl: formatDecibels, formatFrequency, formatDuration, formatPercent and formatNumber.
  • Scales spread a range over the travel of a control: 'linear', 'log' for frequencies and times, powerScale(exponent) for a curve in between, or a Scale of your own.
  • Gestures. Each change the user makes has a start and an end (onValueChangeStart, onValueChangeEnd), so a plugin can record it as one step of the host's automation.
  • Customizing works as for the other components: each control has a class, contour-<component>, and your className is merged in.