Audio components for React, built the shadcn way. Level meters, visualizers, faders, knobs, channel strips, a complete mixer, players and sound pads.
Decibel maths, meter ballistics, zones, fader tapers, band resampling, bar level smoothing, wave line shapes, time formatting, the shared frame loop, frame emitters, shared types and the audio theme tokens. Every audiocn component depends on it.
A microphone, speaker or source picker with loading, permission, None and disconnected-device states, and a slot for a live preview.
A composable audio player: transport, seek bar with buffering, time, volume, playback rate, loop and keyboard shortcuts.
A row of bars driven by frequency bands, with idle, loading and mirrored modes. Bars paint without re-rendering React.
One channel of a mixer: header, status, meter, fader, value, controls and a notice, as a row or a console strip. The master strip is a variant.
Mute, solo and monitor toggle buttons with their own pressed colours.
A clip light that holds after the signal clips, with an optional count and click to reset.
A numeric level label that updates at a readable rate, with a reserved width so the layout never shifts.
Tick marks and labels for a decibel range, shared by meters and faders.
Frequency-band bars drawn as crackling filaments, with arcs between loud neighbours and sparks on sudden rises. Takes its colour from the theme.
Shared drawing for the electric visualizers: repeatable crackle, a spark pool, canvas sizing and theme colours read from CSS.
One electric line across the width: a crackling, white-hot trace with a tall glow, forks off the peaks and sparks. Follows the frequency bands as a smooth wave, or the signal itself like an oscilloscope.
A volume fader in decibels: linear or console taper, detents, a scale, reset, an editable value, silence at the bottom, horizontal or vertical.
A rotary control drawn in SVG, with vertical, horizontal or circular dragging, fine adjustment, reset, a bipolar origin, an optional click sound and a volume dial skin with a numbered scale and an aluminium cap.
A peak and RMS level meter: mono or stereo, horizontal or vertical, solid, segmented or gradient, with zones, peak hold, a scale, a readout and a clip light.
A canvas waveform of a live signal: scrolling level history or the current frame, as bars, a mirrored shape or a line.
Choose and check a microphone: device select with a live preview, a level meter, gain, mute and a level check that says whether you sound right.
The container for channel strips: shared meter settings, keyboard navigation between strips, a master area and an empty state.
A playlist player with a waveform seek bar, shuffle, repeat, volume and optional ducking under the microphone.
Left and right balance with a fill from the centre, a centre detent and reset.
A labelled slider with a numeric input, unit, marks, reset and a linear or log scale, for gain trims, delays, thresholds and frequencies.
Compact microphone and system audio controls behind one toolbar button that shows a live level.
One clean line across the width that follows the sound, as a smooth wave shaped by the frequency bands or a triggered oscilloscope trace.
A grid of sound pads with global hotkeys, per-pad mode and volume in a context menu, master volume, stop all, and drag-and-drop to add sounds.
A trigger pad with one-shot, toggle, hold and loop modes, a hotkey, playback progress and an accent colour, plus a grid with hotkeys and arrow navigation.
A frequency spectrum analyser drawn on canvas as bars, a line or an area, with peak hold, a grid and frequency and level axes.
The complete mixer: microphone, system audio, music and sound pads with meters, faders, mute, solo, monitor and ducking, a limited master and a mixed output stream, all running on Web Audio.
Turn system audio capture on, set its level, watch its meter and explain what the browser will capture.
A list of tracks with active and playing states, arrow-key navigation and slots for artwork, duration and actions.
Meter and visual frame sources from a MediaStream, media element or AudioNode, using the Web Audio AnalyserNode.
The context a mixer or channel strip uses to pass orientation, size, range, zones and ballistics down to the components inside it.
One shared AudioContext that resumes on the first user gesture, plus a provider to supply your own.
The list of audio input or output devices, with permission state and live updates when devices change.
Playback state for an audio element the hook owns: status, time, duration, buffering, volume, rate and loop, plus a smooth time source.
Clip detection with a hold time, a clip count and a reset.
A synthetic speech, music, tone or noise signal as frame sources, for previews, prototypes and tests.
Subscribe a callback to a frame source, with a stable callback and automatic cleanup.
A gain node on the shared AudioContext, wired from an input to a destination, with click-free level changes.
Read a meter source into React state at a low rate, for labels and conditional UI.
Open a microphone as a MediaStream, with browser processing off by default so meters show the real signal.
Mixer state with no audio attached: gain, mute, solo, pan and monitor per channel, a master, persistence and a controlled mode.
True when the user asked the system to reduce motion.
Low-latency playback of short sounds decoded into memory, with voices, looping, progress and a routable output node.
Capture system or tab audio through the browser's screen-share picker.
Whether an element is on screen, in a ref, so animation loops can skip frames nobody sees.
Decode an audio file, or take an AudioBuffer, and reduce it to cached waveform peaks.
Binds mixer state to a Web Audio graph: per-channel gain, ducking, pan and monitor sends, a limited master bus, post-fader meters and a mixed output stream.
A 0..1 volume slider with a mute button and a perceptual curve, for players.