@audiocn
Audio components for React, built the shadcn way. Level meters, visualizers, faders, knobs, channel strips, a complete mixer, players and sound pads.
Install this registry
npx shadcn@latest add https://www.audiocn.dev/r/registry.json pnpm dlx shadcn@latest add https://www.audiocn.dev/r/registry.json bunx shadcn@latest add https://www.audiocn.dev/r/registry.json curl -s https://www.audiocn.dev/r/registry.json Components
51 totalDecibel maths, meter ballistics, zones, fader tapers, band resampling, bar level smoothing, wave line shapes, time formatting, the shared frame loop, frame emi…
npx shadcn@latest add https://www.audiocn.dev/r/core.json Subscribe a callback to a frame source, with a stable callback and automatic cleanup.
npx shadcn@latest add https://www.audiocn.dev/r/use-frame-source.json Read a meter source into React state at a low rate, for labels and conditional UI.
npx shadcn@latest add https://www.audiocn.dev/r/use-level.json Clip detection with a hold time, a clip count and a reset.
npx shadcn@latest add https://www.audiocn.dev/r/use-clip-hold.json True when the user asked the system to reduce motion.
npx shadcn@latest add https://www.audiocn.dev/r/use-reduced-motion.json Whether an element is on screen, in a ref, so animation loops can skip frames nobody sees.
npx shadcn@latest add https://www.audiocn.dev/r/use-visibility.json A synthetic speech, music, tone or noise signal as frame sources, for previews, prototypes and tests.
npx shadcn@latest add https://www.audiocn.dev/r/use-demo-signal.json One shared AudioContext that resumes on the first user gesture, plus a provider to supply your own.
npx shadcn@latest add https://www.audiocn.dev/r/use-audio-context.json A gain node on the shared AudioContext, wired from an input to a destination, with click-free level changes.
npx shadcn@latest add https://www.audiocn.dev/r/use-gain-node.json Meter and visual frame sources from a MediaStream, media element or AudioNode, using the Web Audio AnalyserNode.
npx shadcn@latest add https://www.audiocn.dev/r/use-audio-analyser.json The list of audio input or output devices, with permission state and live updates when devices change.
npx shadcn@latest add https://www.audiocn.dev/r/use-audio-devices.json Open a microphone as a MediaStream, with browser processing off by default so meters show the real signal.
npx shadcn@latest add https://www.audiocn.dev/r/use-microphone.json Capture system or tab audio through the browser's screen-share picker.
npx shadcn@latest add https://www.audiocn.dev/r/use-system-audio.json The context a mixer or channel strip uses to pass orientation, size, range, zones and ballistics down to the components inside it.
npx shadcn@latest add https://www.audiocn.dev/r/use-audio-config.json Tick marks and labels for a decibel range, shared by meters and faders.
npx shadcn@latest add https://www.audiocn.dev/r/db-scale.json A numeric level label that updates at a readable rate, with a reserved width so the layout never shifts.
npx shadcn@latest add https://www.audiocn.dev/r/db-readout.json A clip light that holds after the signal clips, with an optional count and click to reset.
npx shadcn@latest add https://www.audiocn.dev/r/clip-indicator.json 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.
npx shadcn@latest add https://www.audiocn.dev/r/level-meter.json A recorder-style level meter on an LCD Display's screen: block segments in the display's ink that light whole, a held peak segment, per-channel dB readouts, a …
npx shadcn@latest add https://www.audiocn.dev/r/lcd-meter.json A row of bars driven by frequency bands, with idle, loading and mirrored modes. Bars paint without re-rendering React.
npx shadcn@latest add https://www.audiocn.dev/r/bar-visualizer.json Shared drawing for the electric visualizers: repeatable crackle, a spark pool, canvas sizing and theme colours read from CSS.
npx shadcn@latest add https://www.audiocn.dev/r/electric.json Frequency-band bars drawn as crackling filaments, with arcs between loud neighbours and sparks on sudden rises. Takes its colour from the theme.
npx shadcn@latest add https://www.audiocn.dev/r/electric-bar-visualizer.json 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…
npx shadcn@latest add https://www.audiocn.dev/r/electric-waveform.json One clean line across the width that follows the sound, as a smooth wave shaped by the frequency bands or a triggered oscilloscope trace.
npx shadcn@latest add https://www.audiocn.dev/r/smooth-waveform.json A canvas waveform of a live signal: scrolling level history or the current frame, as bars, a mirrored shape or a line.
npx shadcn@latest add https://www.audiocn.dev/r/live-waveform.json A volume fader in decibels: linear or console taper, detents, a scale, reset, an editable value, silence at the bottom, horizontal or vertical.
npx shadcn@latest add https://www.audiocn.dev/r/fader.json A labelled slider with a numeric input, unit, marks, reset and a linear or log scale, for gain trims, delays, thresholds and frequencies.
npx shadcn@latest add https://www.audiocn.dev/r/parameter-slider.json 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 d…
npx shadcn@latest add https://www.audiocn.dev/r/knob.json A dot-matrix screen in a bezel, backlit in the light theme and glowing in the dark one: rows of dim labels and bright values in the theme colour or amber, gree…
npx shadcn@latest add https://www.audiocn.dev/r/lcd-display.json Left and right balance with a fill from the centre, a centre detent and reset.
npx shadcn@latest add https://www.audiocn.dev/r/pan-control.json Mute, solo and monitor toggle buttons with their own pressed colours.
npx shadcn@latest add https://www.audiocn.dev/r/channel-toggle.json A 0..1 volume slider with a mute button and a perceptual curve, for players.
npx shadcn@latest add https://www.audiocn.dev/r/volume-control.json A microphone, speaker or source picker with loading, permission, None and disconnected-device states, and a slot for a live preview.
npx shadcn@latest add https://www.audiocn.dev/r/audio-device-select.json Mixer state with no audio attached: gain, mute, solo, pan and monitor per channel, a master, persistence and a controlled mode.
npx shadcn@latest add https://www.audiocn.dev/r/use-mixer.json 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.
npx shadcn@latest add https://www.audiocn.dev/r/use-web-audio-mixer.json 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.
npx shadcn@latest add https://www.audiocn.dev/r/channel-strip.json The container for channel strips: shared meter settings, keyboard navigation between strips, a master area and an empty state.
npx shadcn@latest add https://www.audiocn.dev/r/mixer.json Playback state for an audio element the hook owns: status, time, duration, buffering, volume, rate and loop, plus a smooth time source.
npx shadcn@latest add https://www.audiocn.dev/r/use-audio-player.json Low-latency playback of short sounds decoded into memory, with voices, looping, progress and a routable output node.
npx shadcn@latest add https://www.audiocn.dev/r/use-sound.json Decode an audio file, or take an AudioBuffer, and reduce it to cached waveform peaks.
npx shadcn@latest add https://www.audiocn.dev/r/use-waveform-data.json A static waveform of a clip with a smooth playhead, seeking by pointer and keyboard, hover time, draggable regions and markers.
npx shadcn@latest add https://www.audiocn.dev/r/waveform.json A composable audio player: transport, seek bar with buffering, time, volume, playback rate, loop and keyboard shortcuts.
npx shadcn@latest add https://www.audiocn.dev/r/audio-player.json A list of tracks with active and playing states, arrow-key navigation and slots for artwork, duration and actions.
npx shadcn@latest add https://www.audiocn.dev/r/track-list.json 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.
npx shadcn@latest add https://www.audiocn.dev/r/sound-pad.json A frequency spectrum analyser drawn on canvas as bars, a line or an area, with peak hold, a grid and frequency and level axes.
npx shadcn@latest add https://www.audiocn.dev/r/spectrum.json 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 st…
npx shadcn@latest add https://www.audiocn.dev/r/system-audio-mixer.json 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.
npx shadcn@latest add https://www.audiocn.dev/r/mic-setup.json Turn system audio capture on, set its level, watch its meter and explain what the browser will capture.
npx shadcn@latest add https://www.audiocn.dev/r/system-audio-settings.json Compact microphone and system audio controls behind one toolbar button that shows a live level.
npx shadcn@latest add https://www.audiocn.dev/r/quick-audio-popover.json 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.
npx shadcn@latest add https://www.audiocn.dev/r/soundboard.json A playlist player with a waveform seek bar, shuffle, repeat, volume and optional ducking under the microphone.
npx shadcn@latest add https://www.audiocn.dev/r/music-player.json