Audio UI for React

Controls

• Knob

  A rotary control for continuous parameters, with pointer, wheel and keyboard input.

• Fader

  A linear slider for gain and other continuous parameters.

• XY Pad

  A two-dimensional control for two parameters at once, with pointer, wheel and keyboard input.

• Envelope

  An editor for a breakpoint ramp, such as an ADSR shape or an automation curve.

Keyboards and pads

• Piano

  A piano keyboard for a MIDI pitch range, played with the pointer, touch or the keyboard.

• Pad

  A grid of drum pads struck by pointer, touch or keyboard, with velocity and choke groups.

Displays

• Meter

  A level meter in decibels for one or more channels, with peak hold.

• Needle meter

  A VU meter to the standard, with its dial from -20 to +3 VU and a needle that moves the way a VU needle does.

• Waveform

  Draws audio: a seekable waveform with regions and markers, a live waveform that scrolls with the signal, and a bar visualizer.

• Plot

  Curves and draggable points, for equalizers, filters and compressors.

• Spectrum Analyzer

  The level of a sound across frequencies, live, on a log axis in hertz, with held peaks.

• Tuner

  The note and the pitch of a sound, live from the microphone, with a needle on a scale of cents.

Arrangement

• Arrangement

  A DAW's arrangement: a zoomable timeline with a ruler that seeks and lanes of clips, and the parts around it, its state, clips, tracks, locators, automation and MIDI playback, each installed on its own.

Editors

• Piano roll

  A note editor on a grid: draw, move, resize and select notes, with a playable keyboard and a velocity lane.

• Sequencer

  A step grid: press a step, or drag across several, to draw a pattern.

Piano roll tools

• Scale menu

  A menu that picks a root and a scale and turns the scale on or off, in parts you place beside items of your own.

• Note find

  Finds notes by what they are: a pitch, ranges of velocity, length and chance, in or out of the scale, active or not, every few, or the rest.

• Note edit menu

  A menu of commands over a piano roll's notes, with their keys: split, join, quantize, legato, time commands, fit to scale, chance and velocity.

Transport

• Transport

  DAW transport controls: play, pause and stop, the position in bars, beats and sixteenths, loop and metronome toggles, tempo and time signature.

• Scrubber

  A compact player: play and pause, the position, a seek bar and the length.

Mixing

• Mixer

  A mixing console: tracks with pan, fader, meter, mute and solo into a master with a stereo meter, every meter reading the real signal of its channel.

• Devices

  What a device is, the four pieces it comes in, and what every device shares: the sidechain, the tempo, the latency and the tools an agent drives it with. The catalog is grouped as in a mixer: dynamics, EQ and filters, distortion, delay and reverb, modulation, utility and instruments.

Dynamics

• Compressor

  A compressor device: threshold, ratio, attack, release, knee, make-up and mix, a panel that draws its transfer curve, a Web Audio engine with a sidechain, and tools for agents.

• Multiband compressor

  A multiband compressor device: two splits into three bands, a threshold and a ratio for each, a shared attack and release, a panel that draws the bands, a Web Audio engine and tools for agents.

• Limiter

  A limiter device: input gain, ceiling and release, a panel that draws its transfer curve with a handle on the ceiling, a Web Audio engine and tools for agents.

• Gate

  A gate device: threshold, floor, attack, hold, release and look-ahead, a panel that draws its transfer curve, a Web Audio engine with a sidechain, and tools for agents.

• De-esser

  A de-esser device: frequency, threshold, ratio, range and listen, a panel that draws what it does at each frequency, a Web Audio engine and tools for agents.

• Transient shaper

  A transient shaper device: attack and sustain, each up or down by 12 dB, a panel with one handle for both, a Web Audio engine and tools for agents.

Tone

• Equalizer

  An equalizer device: four bands with a type, a frequency, a gain and a width, a panel with a handle on each band, a Web Audio engine and tools for agents.

• Channel EQ

  A channel EQ device: a low shelf, a sweepable mid bell, a high shelf, a high-pass switch and an output level, a panel with a handle on the mid band, a Web Audio engine and tools for agents.

• Filter

  A filter device: a type, a cutoff and a resonance, a panel with a handle on the curve and a live spectrum, a Web Audio engine and tools for agents.

Distortion

• Overdrive

  An overdrive device: a band-pass before a soft clip, a drive, a tone and a mix, a panel that draws the band that reaches the clip, a Web Audio engine and tools for agents.

• Saturator

  A saturator device: four curves, a drive, a mix and an output, a panel that draws the transfer curve, a Web Audio engine and tools for agents.

• Distortion

  A distortion device: a drive, a tone, a mix and an output, a panel that draws the transfer curve, a Web Audio engine and tools for agents.

• Redux

  A redux device: a number of bits, a downsample factor and a mix, a panel that draws the stairs the bits make, a Web Audio engine and tools for agents.

Space and modulation

• Delay

  A delay device: a time or a note value, a feedback, a tone and a mix, a panel that draws the echoes with a handle, a Web Audio engine and tools for agents.

• Reverb

  A reverb device: a decay, a pre-delay, a damping and a mix, a panel that draws the tail with a handle, a Web Audio engine and tools for agents.

• Chorus

  A chorus device: a rate or a note value, a depth, a delay and a mix, a panel that draws the sweep of the delay, a Web Audio engine and tools for agents.

• Phaser

  A phaser device: a phaser or flanger mode, a rate or a note value, a depth, a centre frequency, a delay, a feedback and a mix, a panel that draws the sweep, a Web Audio engine and tools for agents.

• Auto pan

  An auto pan device: a pan or tremolo mode, a wave shape, a rate or a note value and a depth, a panel that draws the movement, a Web Audio engine and tools for agents.

Utility and instruments

• Utility

  A utility device: a gain, a pan, a width, a mono switch and a phase invert, a panel without a display, a Web Audio engine and tools for agents.

• Mid/side

  A mid/side device: a level for the centre, a level for the sides and a bass mono frequency, a panel with one handle for the two levels, a Web Audio engine and tools for agents.

• Pocket synth

  A synth device: a waveform, a filter and a volume, a panel with a pad that plays it, a Web Audio engine with noteOn and noteOff, and tools for agents.

• Wave shaper

  A wave shaper synth device: a waveform, a drive, a tone, a detune, a mix and a volume, a panel with a pad that plays it, a Web Audio engine with noteOn and noteOff, and tools for agents.

• Overview

  What makes the sound behind the components: the hooks and libraries audio/ui ships on the Web Audio API, and how an engine of your own drives the same components.

• Output

  The page's one audio context, and a master bus with a safety limiter that every sound of a screen goes through.

• Clock and time

  A transport clock that schedules notes ahead on the audio clock, with a loop, seeking and tempo changes, and the musical time it counts in.

• Synthesis

  Synth voices shaped by an envelope, the ramps that shape them, and drum hits made from oscillators and noise.

• Demo sounds

  The two sounds the previews play, made with Web Audio and no samples: listen to each and ask for one by name.

• Input

  A MIDI keyboard and the microphone: the notes of the page's MIDI input, and the microphone as an analyser.

• Analysis

  Live levels and spectra from an analyser, in the shape a meter or a plot reads, and the analysis functions behind them.

• Controllers

  The logic under each primitive, from @audio-ui/core: one controller per control, with the same contract whatever draws it. A React part is one adapter of it; a plain DOM page, Vue or Svelte can be another.