# audiocn Solid

> Copy-and-paste audio components for Solid. Build mixers, players, meters, knobs and waveforms with accessible UI you own.

Install components with the shadcn CLI after adding "@audiocn-solid": "https://audiocn-solid.jhonra121.workers.dev/r/solid2/{name}.json" to the registries in components.json. For Solid 1, use "https://audiocn-solid.jhonra121.workers.dev/r/solid1/{name}.json".

Append `.md` to any page below for a Markdown version with install steps, usage and the full API, written for AI agents.

## Docs

- [Blocks](https://audiocn-solid.jhonra121.workers.dev/docs/blocks): Complete, working assemblies you install once and then make your own.
- [Microphone Setup](https://audiocn-solid.jhonra121.workers.dev/docs/blocks/mic-setup): Choose and check a microphone, with a live preview, a meter, gain, mute and a level check.
- [Music Player](https://audiocn-solid.jhonra121.workers.dev/docs/blocks/music-player): A playlist player with a waveform seek bar, shuffle, repeat and ducking under the microphone.
- [Quick Audio Popover](https://audiocn-solid.jhonra121.workers.dev/docs/blocks/quick-audio-popover): Microphone and system audio controls behind one toolbar button that shows a live level.
- [Soundboard](https://audiocn-solid.jhonra121.workers.dev/docs/blocks/soundboard): Sound pads with hotkeys, modes, volume, stop all and drag-and-drop.
- [System Audio Mixer](https://audiocn-solid.jhonra121.workers.dev/docs/blocks/system-audio-mixer): The complete mixer, with microphone, system audio, music, sound pads and a master, running on Web Audio.
- [System Audio Settings](https://audiocn-solid.jhonra121.workers.dev/docs/blocks/system-audio-settings): Turn system audio capture on, set its level and see what the browser captures.
- [Audio Device Select](https://audiocn-solid.jhonra121.workers.dev/docs/components/audio-device-select): A microphone, speaker or source picker with permission, loading and disconnected states.
- [Audio Player](https://audiocn-solid.jhonra121.workers.dev/docs/components/audio-player): A composable audio player with transport, seeking, time, volume, rate, loop and keyboard shortcuts.
- [Bar Visualizer](https://audiocn-solid.jhonra121.workers.dev/docs/components/bar-visualizer): A row of bars driven by frequency bands, with idle, loading and mirrored modes.
- [Channel Strip](https://audiocn-solid.jhonra121.workers.dev/docs/components/channel-strip): One channel of a mixer, as a row or a console strip, composed from the parts you need.
- [Channel Toggle](https://audiocn-solid.jhonra121.workers.dev/docs/components/channel-toggle): Mute, solo and monitor toggle buttons with their own pressed colours.
- [Clip Indicator](https://audiocn-solid.jhonra121.workers.dev/docs/components/clip-indicator): A clip light that holds after the signal clips, with an optional count and click to reset.
- [dB Readout](https://audiocn-solid.jhonra121.workers.dev/docs/components/db-readout): A numeric level label that updates at a readable rate and never shifts the layout.
- [dB Scale](https://audiocn-solid.jhonra121.workers.dev/docs/components/db-scale): Tick marks and labels for a decibel range, shared by meters and faders.
- [Electric Bar Visualizer](https://audiocn-solid.jhonra121.workers.dev/docs/components/electric-bar-visualizer): Frequency-band bars drawn as crackling filaments, with arcs between loud neighbours and sparks on sudden rises.
- [Electric Waveform](https://audiocn-solid.jhonra121.workers.dev/docs/components/electric-waveform): One electric line across the width, with a crackling white-hot core, a tall glow, forks off the peaks and sparks.
- [Fader](https://audiocn-solid.jhonra121.workers.dev/docs/components/fader): A volume fader in decibels, with tapers, detents, a scale, reset and an editable value.
- [Components](https://audiocn-solid.jhonra121.workers.dev/docs/components): Every audiocn component, grouped by what it does.
- [Knob](https://audiocn-solid.jhonra121.workers.dev/docs/components/knob): A rotary control for dense layouts, drawn in SVG.
- [Level Meter](https://audiocn-solid.jhonra121.workers.dev/docs/components/level-meter): A peak and RMS level meter with zones, peak hold, a scale, a readout and a clip light.
- [Live Waveform](https://audiocn-solid.jhonra121.workers.dev/docs/components/live-waveform): A canvas waveform of a live signal, as scrolling history or the current frame.
- [Mixer](https://audiocn-solid.jhonra121.workers.dev/docs/components/mixer): The container for channel strips, with shared meter settings and keyboard navigation.
- [Pan Control](https://audiocn-solid.jhonra121.workers.dev/docs/components/pan-control): Left and right balance with a fill from the centre and a centre detent.
- [Parameter Slider](https://audiocn-solid.jhonra121.workers.dev/docs/components/parameter-slider): A labelled slider with a numeric input, unit, marks and reset, for everything that is not a volume.
- [Smooth Waveform](https://audiocn-solid.jhonra121.workers.dev/docs/components/smooth-waveform): One clean line across the width that follows the sound, as a flowing wave or an oscilloscope trace.
- [Sound Pad](https://audiocn-solid.jhonra121.workers.dev/docs/components/sound-pad): A trigger pad with modes, a hotkey, playback progress and an accent colour.
- [Spectrum](https://audiocn-solid.jhonra121.workers.dev/docs/components/spectrum): A frequency spectrum analyser with axes, a grid and peak hold.
- [Track List](https://audiocn-solid.jhonra121.workers.dev/docs/components/track-list): A list of tracks with active and playing states and arrow-key navigation.
- [Volume Control](https://audiocn-solid.jhonra121.workers.dev/docs/components/volume-control): A simple volume slider with a mute button, for players.
- [Waveform](https://audiocn-solid.jhonra121.workers.dev/docs/components/waveform): A static waveform of a clip with a smooth playhead, seeking, hover time, regions and markers.
- [Accessibility](https://audiocn-solid.jhonra121.workers.dev/docs/concepts/accessibility): How audiocn components work with keyboards, screen readers and reduced motion.
- [Using your own audio engine](https://audiocn-solid.jhonra121.workers.dev/docs/concepts/custom-engine): Drive audiocn from a native backend, a WebSocket, a worker or anything else.
- [Decibels and levels](https://audiocn-solid.jhonra121.workers.dev/docs/concepts/decibels): The units audiocn uses, and the helpers in the audio core that convert between them.
- [Feeding data](https://audiocn-solid.jhonra121.workers.dev/docs/concepts/feeding-data): Every meter and visualizer accepts levels three ways, so it fits any audio source.
- [Theming](https://audiocn-solid.jhonra121.workers.dev/docs/concepts/theming): audiocn uses your shadcn theme, plus six audio tokens you can change like any other.
- [useAudioAnalyser](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-audio-analyser): Meter and visual frame sources from a MediaStream, media element or AudioNode.
- [useAudioContext](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-audio-context): One shared AudioContext that resumes on the first user gesture, plus a provider to supply your own.
- [useAudioDevices](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-audio-devices): The list of audio input or output devices, with permission state and live updates.
- [useAudioPlayer](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-audio-player): Playback state for an audio element the hook owns.
- [useClipHold](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-clip-hold): Clip detection with a hold time, a clip count and a reset.
- [useDemoSignal](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-demo-signal): A synthetic speech, music, tone or noise signal as frame sources, for previews, prototypes and tests.
- [useFrameSource](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-frame-source): Subscribe a callback to a frame source, with a stable callback and automatic cleanup.
- [useGainNode](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-gain-node): A gain node on the shared AudioContext, wired from an input to a destination, with click-free level changes.
- [useLevel](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-level): Read a meter source into Solid state at a low rate, for labels and conditional UI.
- [useMicrophone](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-microphone): Open a microphone as a MediaStream, with browser processing off by default.
- [useMixer](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-mixer): Mixer state with no audio attached: gain, mute, solo, pan and monitor per channel, plus a master.
- [useReducedMotion](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-reduced-motion): True when the user asked the system to reduce motion.
- [useSound](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-sound): Low-latency playback of short sounds decoded into memory.
- [useSystemAudio](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-system-audio): Capture system or tab audio through the browser's screen-share picker.
- [useVisibility](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-visibility): Whether an element is on screen, in a ref, so animation loops can skip frames nobody sees.
- [useWaveformData](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-waveform-data): Decode an audio file and reduce it to cached waveform peaks.
- [useWebAudioMixer](https://audiocn-solid.jhonra121.workers.dev/docs/hooks/use-web-audio-mixer): Binds mixer state to a Web Audio graph, with ducking, monitor sends, a limited master and meters.
- [Introduction](https://audiocn-solid.jhonra121.workers.dev/docs): Audio components for Solid, built the shadcn way.
- [Installation](https://audiocn-solid.jhonra121.workers.dev/docs/installation): Add the audiocn Solid registry to a shadcn project and install components with the shadcn CLI.