Lab

Audio UI for the Web, React, Vue and Svelte

Accessible audio controls for any framework.

Get started Browse components

Audio editor

0:00
0:00.0000:01.000
Library
CompressorBrings loud parts down: above the threshold the level rises by one decibel for every ratio decibels in, with a soft knee, an attack and a release, make-up gain and a dry and compressed mix. Its model is a smooth one, whose gain reduction is smoothed in decibels so its attack and release hold at any depth; a VCA, clean and near hard-kneed; a FET, very fast; an opto, which follows the level's RMS and releases slower the longer it has been reducing, with no release of its own; or a vari-mu, which follows its own output, its ratio rising as it is pushed, with no ratio of its own.
LimiterKeeps the sound under a ceiling: the input gain pushes the level against it, and what goes over is held down with a release for how fast it lets go. It sees each peak coming by the look-ahead and ramps the gain down into it, and with true peak on it keeps the waveform rebuilt between the samples under the ceiling too.
GateCleans up between sounds: above the threshold the signal passes, below it the signal is turned down to the floor. The attack and the release say how fast it opens and closes, the hold how long it stays open after the level drops, and the look-ahead delays the signal so the gate is open before a transient arrives. Once open it closes only when the level falls the hysteresis under the threshold, so a level around the threshold does not make it chatter.
ExpanderWidens the dynamics. Downward, it turns down what falls under the threshold, by the ratio for every decibel under it, never by more than the range: softer than a gate. Upward, it lifts what rises over the threshold the same way, never by more than the range, giving back the peaks a limiter flattened. The knee softens the turn at the threshold, and the attack and the release say how fast it follows the level.
DuckerTurns a sound down while another one plays: the key, connected to the sidechain, a voice over music or a kick under a pad. Above the threshold, each decibel of the key takes the ratio's share of a decibel off the sound, through a soft knee, never more than the range. The attack and the release say how fast it ducks and comes back. With no key, it follows the sound itself.
CompanderDraws its own transfer curve: the level out at -90, -60, -20 and 0 dB in, in straight lines between them. A point under the straight line of a clean sound turns the sound down at that level, one over it turns it up: one curve brings the loud parts down, lifts the quiet ones or closes on the noise. The attack and the release say how fast it follows the level.
UnlimiterGives back the attacks a limiter flattened. It tells an attack by how far a fast follower of the level rises over a slow one, and lifts it by up to the amount. Adaptive, it lifts each attack by what it is missing to reach the crest, so a healthy attack is left alone; otherwise it lifts every attack in proportion to its size, the drive dB for each dB. The ceiling, when on, keeps the lifted peaks under it.
Multiband compressorCompresses three bands apart: the signal is split at two frequencies into low, mid and high, each with its own threshold and ratio, with an attack and a release shared by the three and an output gain. A loud bass does not pump the highs.
Transient shaperShapes the attack and the sustain of a sound: the attack is the moment a hit starts, the sustain is what rings after it, and each is turned up or down by up to 12 dB, at any level of the signal, with an output gain. It tells the attack by how far the level rises over a copy of it 50 times slower and moves the gain in a line between the attack's and the sustain's.
De-esserTames the sharp s and t of a voice: when the highs above a frequency get loud they are taken down by the ratio, never by more than the range. Its split, band and wide band models tell an s by how far the highs rise over the voice's body, whatever the level, and take down the highs above the frequency, a band around it as wide as its Q, or the whole sound while the s lasts.
Equalizer
400 Hz
0.0 dB
1.00
0.0 dB
Compressor
-18.0 dB
4.0:1
6.0 dB
5.0 ms
80 ms
0.0 dB
100 %

Components

Elements

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.

  • Parameter Field

    A parameter's value as a field you type, step, or scrub by dragging its label or its unit, with units and precision.

  • Rocker Switch

    A rocker switch, as on a mixer or a synth, the side pressed down sunk into the panel.

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.

  • LED

    A status light that glows in its tone when lit, a dim dot when off, and blinks for an armed take.

  • LCD

    A small screen, as on a synth, that holds a reading under a caption, in light and dark alike.

  • Value Display

    An audio value as it reads, in steady monospace figures, for tempo, level, frequency, pan, percent, semitones and time.

  • 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.

Workstation

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

  • Audio editor

    An audio editor for one sound: a transport that plays, loops and records, a waveform that zooms down to the samples and edits with undo, and the track's device chain with its library.

  • 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

    The mixer of an arrangement, controlled: a channel for each track and return with pan, sends, fader, meter, peak, solo and mute, then the main track, every meter reading the real signal of its channel.

  • Device chain

    A track's devices in a row, each drawn by its own panel: move, fold, switch off and remove them, and drop a device where it goes. Controlled, with no audio in it.

  • Device browser

    A library of devices by shelf, with a search: pick one with Enter, a double-click or the Add button, or drag it onto a device chain. It keeps what is searched and marked, and nothing else.

  • Rack

    Devices in parallel chains, summed on the same frame, each chain with its volume, pan, switch and solo, and eight macros over the parameters inside. Controlled, with no audio in it.

Export

  • Export dialog

    The settings of an export: the file's format, its bit depth or bitrate, and its level, left as it is, brought to its peak or to a loudness target.

Devices

  • 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: five models, threshold, ratio, attack, release, knee, make-up and mix, a panel that draws its transfer curve, a Web Audio engine 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, release and true peak, 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, hysteresis, floor, attack, hold, release and look-ahead, a panel that draws its transfer curve, a Web Audio engine and tools for agents.

  • Expander

    An expander device: downward or upward, threshold, ratio, knee, range, attack and release, a panel that draws its transfer curve, a Web Audio engine and tools for agents.

  • Ducker

    A ducker device: threshold, ratio, knee, range, attack and release, a panel that draws the gain for the key's level, a Web Audio engine with a sidechain, and tools for agents.

  • Compander

    A compander device: a transfer curve drawn with four points, attack and release, a panel with a handle on each point, a Web Audio engine and tools for agents.

  • Unlimiter

    An unlimiter device: amount, drive, crest, adaptive and a guarded ceiling, a panel that draws the lift for an attack's size, a Web Audio engine and tools for agents.

  • De-esser

    A de-esser device: three models, frequency, over body, ratio and range, 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.

  • Graphic EQ

    A graphic EQ device: ten bands an octave apart on faders and an output level, a panel that draws the curve, a Web Audio engine and tools for agents.

  • Tilt EQ

    A tilt EQ device: one knob that tilts the tone around a pivot and an output level, a panel that draws the curve, a Web Audio engine and tools for agents.

  • Exciter

    An exciter device: a frequency, a drive and an amount, a panel that draws the band it excites, a Web Audio engine and tools for agents.

  • Bass Enhancer

    A bass enhancer device: a frequency, a drive, an amount and the sub it keeps, a panel that draws its two bands, a Web Audio engine and tools for agents.

  • Filter

    A filter device: a type, six circuits, a cutoff, a resonance and a drive, 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: four curves, 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.

  • Lo-fi

    A lo-fi device: wow, flutter, hiss, crackle, a high-pass and a low-pass and a tape drive, a panel that draws the band it leaves, a Web Audio engine and tools for agents.

Space and modulation

  • Delay

    A delay device: four modes, 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: six types of room, 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, one to eight voices and a mix, a panel that draws the sweep of each voice, a Web Audio engine and tools for agents.

  • Phaser

    A phaser device: a phaser, classic or flanger mode, a rate or a note value, a depth, a centre frequency, a delay, the classic phaser's stages, 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.

  • Vibe

    A photocell vibe device: a lamp that pulses on four phase-shift stages, in chorus or vibrato, with its speed, intensity and level, a panel that draws the lamp, a Web Audio engine and tools for agents.

  • Wah

    A wah device: an envelope, sweep or pedal mode, the band's frequency and resonance, an envelope's range and timing, an oscillator's rate and depth, a mix and an output, a panel that draws the band, a Web Audio engine and tools for agents.

  • Frequency Shifter

    A frequency shifter device: a shift or ring mode, the shift in hertz, the ring's frequency, a precision and a mix, a panel that draws what it does to a note, a Web Audio engine and tools for agents.

  • Rotary

    A rotary speaker device: a slow, fast or stop speed, a crossover, a depth, the horn's and the drum's ramps, a width and a mix, a panel that draws its two bands, a Web Audio engine and tools for agents.

  • Stutter

    A stutter device: an interval and a slice in note values, a decay and a mix, a panel that draws one interval, a Web Audio engine and tools for agents.

Utility

  • 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 widening, 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.

  • Binaural Panner

    A binaural panner device: a direction, a distance, a head's size and a mix, a panel with the head seen from above, a Web Audio engine and tools for agents.

Instruments

  • Poly synth

    An eighties polyphonic synth device: a saw, a pulse, a sub oscillator and noise into a resonant filter, an envelope, a vibrato and a chorus, with eight presets, a panel with a keyboard, a Web Audio engine and tools for agents.

  • Mono synth

    A monophonic analog synth device: a saw, square or triangle oscillator, a sub oscillator and noise into a resonant filter, an envelope, a glide and a vibrato, with eight presets, a panel with a keyboard, a Web Audio engine and tools for agents.

  • Electric piano

    A tine electric piano device: a body that barks, a bell that pings, a pickup that can be driven and a tremolo, with four presets, a panel with a keyboard, a Web Audio engine and tools for agents.

  • Organ

    A tonewheel organ device: nine drawbars, a percussion, a key click, a drive and a rotary speaker, with six registrations, a panel with drawbars and a keyboard, a Web Audio engine and tools for agents.

  • String machine

    A string machine device: a violin, a viola, a cello and a bass register, a brightness filter, a slow bow and an ensemble, with eight presets, a panel with a keyboard, a Web Audio engine and tools for agents.

  • Tape keys

    A tape-replay keyboard device: 35 keys, each a strip of tape with one note on it, on three tracks (flutes, strings and a choir), with the tape's speed, wow and flutter and a tone, a panel with its keys, a Web Audio engine and tools for agents.

  • Guitar

    A plucked guitar device: a string a pick strikes, that rings and fades with its highs first, through the body and a tone control, with its decay and palm mute, a panel with a keyboard, a Web Audio engine and tools for agents.

  • Drum Synth

    A synthesized drum device: a kick, a snare, a clap, a closed or an open hat, a tom, a rim or a cymbal from oscillators and noise, tuned, with its decay, tone and snap, a panel with a pad, a Web Audio engine and tools for agents.

  • FM synth

    A four-operator FM synth device: four sines at ratios of the pitch, each with its level and envelope, wired by eight algorithms, with feedback, eight presets, a panel with a keyboard, a Web Audio engine and tools for agents.

  • Sampler

    A slice sampler device: a sample cut into sixteen slices, a pad or a key each, through a filter, transposed, struck or gated, with a panel of pads, 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.

What makes the sound

Guides to the sound under the components, each with the hooks and libraries it uses. An engine of your own drives the same components.

  • 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.

  • Playback

    Playing an arrangement's audio clips on the audio clock, to the frame: a transport in frames, a player per track in an AudioWorklet, and the mixer's arithmetic.

  • Synthesis

    Synth voices shaped by an envelope, chords on an instrument that plays one voice, 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.

Built for AI agents

Coding agents use audio/ui as much as people do. Every docs page is also served as markdown, and every component can be found, read and installed without a browser.

  • MCP server

    Lets an agent search the components, read their docs and the catalog. No account.

  • Agent skills

    Teach your agent which layer to pick, how to install and the mistakes to avoid.

  • REST API

    The same answers as JSON: versioned, with no key.

  • llms.txt

    A map of every docs page, each one also served as markdown.

Questions

What is audio/ui?

An open-source library of accessible audio components for the web: knobs, faders, meters, waveforms, timelines, step sequencers, piano rolls and more, as headless React primitives and custom elements on npm, or as styled shadcn/ui components you own.

Is audio/ui free?

Yes. It is open source under the MIT license, for personal and commercial projects.

Do I need shadcn/ui?

No. With shadcn/ui and Tailwind CSS v4, install styled components from the registry. Without them, use the headless primitives of @audio-ui/react and style them your way.

Does audio/ui play sound?

The components are the interface: they take values and report changes, so they work with any engine, from the Web Audio API to an AudioWorklet or WebAssembly. The registry also has hooks and devices that make the sound with the Web Audio API.

Is it accessible?

Yes. The controls use native inputs where it matters, carry labels, work entirely with the keyboard and are announced by screen readers.

Can I use it outside React?

Yes. @audio-ui/elements has every primitive as a custom element, for plain HTML and any framework, typed for Vue and Svelte templates, and @audio-ui/core holds the logic with no dependency.

Can an AI agent build with it?

Yes. Connect the MCP server, install the agent skills with npx skills add ouestlabs/audio-ui, or start from llms.txt and the REST API.

Built by Ouest Labs, the source code is available on GitHub.
RSS