---
name: "@audiocn"
slug: "audiocn"
description: "Audio components for React, built the shadcn way. Level meters, visualizers, faders, knobs, channel strips, a complete mixer, players and sound pads."
category: "Animated components"
tags: ["animation", "audio", "buttons", "cards", "forms", "hooks", "overlays"]
framework: "react"
license: null
author: "audiocn"
website: "https://audiocn.dev"
github: "https://github.com/audiocn/ui"
registry: "https://www.audiocn.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 239
component_count: 49
generated_at: "2026-10-10T06:32:55.998Z"
---

# @audiocn

Audio components for React, built the shadcn way. Level meters, visualizers, faders, knobs, channel strips, a complete mixer, players and sound pads.

## Links

- Website: https://audiocn.dev
- GitHub: https://github.com/audiocn/ui
- Registry JSON: https://www.audiocn.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/audiocn
- This file: https://sh4dcn.vercel.app/md/audiocn.md

## Install

```sh
# add the whole registry (shadcn CLI)
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
# clone the source repo
git clone https://github.com/audiocn/ui.git
# fetch the raw registry index
curl -s https://www.audiocn.dev/r/registry.json
```

## Components (49)

| name | type | description | install |
| --- | --- | --- | --- |
| core | registry:lib | Decibel 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` |
| use-frame-source | registry:hook | 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` |
| use-level | registry:hook | 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` |
| use-clip-hold | registry:hook | 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` |
| use-reduced-motion | registry:hook | True when the user asked the system to reduce motion. | `npx shadcn@latest add https://www.audiocn.dev/r/use-reduced-motion.json` |
| use-visibility | registry:hook | 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` |
| use-demo-signal | registry:hook | 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` |
| use-audio-context | registry:hook | 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` |
| use-gain-node | registry:hook | 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` |
| use-audio-analyser | registry:hook | 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` |
| use-audio-devices | registry:hook | 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` |
| use-microphone | registry:hook | 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` |
| use-system-audio | registry:hook | 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` |
| use-audio-config | registry:hook | 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` |
| db-scale | registry:ui | 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` |
| db-readout | registry:ui | 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` |
| clip-indicator | registry:ui | 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` |
| level-meter | registry:ui | 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` |
| bar-visualizer | registry:ui | 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` |
| electric | registry:lib | 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` |
| electric-bar-visualizer | registry:ui | 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` |
| electric-waveform | registry:ui | 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` |
| smooth-waveform | registry:ui | 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` |
| live-waveform | registry:ui | 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` |
| fader | registry:ui | 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` |
| parameter-slider | registry:ui | 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` |
| knob | registry:ui | 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` |
| pan-control | registry:ui | 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` |
| channel-toggle | registry:ui | Mute, solo and monitor toggle buttons with their own pressed colours. | `npx shadcn@latest add https://www.audiocn.dev/r/channel-toggle.json` |
| volume-control | registry:ui | 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` |
| audio-device-select | registry:ui | 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` |
| use-mixer | registry:hook | 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` |
| use-web-audio-mixer | registry:hook | 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` |
| channel-strip | registry:ui | 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` |
| mixer | registry:ui | 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` |
| use-audio-player | registry:hook | 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` |
| use-sound | registry:hook | 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` |
| use-waveform-data | registry:hook | 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` |
| waveform | registry:ui | 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` |
| audio-player | registry:ui | 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` |
| track-list | registry:ui | 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` |
| sound-pad | registry:ui | 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` |
| spectrum | registry:ui | 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` |
| system-audio-mixer | registry:block | 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` |
| mic-setup | registry:block | 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` |
| system-audio-settings | registry:block | 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` |
| quick-audio-popover | registry:block | 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` |
| soundboard | registry:block | 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` |
| music-player | registry:block | 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` |

## For AI agents

```text
You are adding components from @audiocn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/audiocn.md) for the component list.
2. Fetch the machine-readable index: https://www.audiocn.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: audiocn).
```