# audiocn-svelte

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

audiocn-svelte is a Svelte 5 port of audiocn (https://github.com/audiocn/ui), MIT licensed.

Install components with the shadcn-svelte CLI from the registry at https://juddisjudd.github.io/audiocn-svelte/r, for example: `npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/level-meter.json`.

## Getting started
- [Introduction](https://juddisjudd.github.io/audiocn-svelte/docs/introduction.md): Audio components for Svelte, built the shadcn way.
- [Installation](https://juddisjudd.github.io/audiocn-svelte/docs/installation.md): Add audiocn-svelte components to a shadcn-svelte project with the shadcn-svelte CLI.

## Concepts
- [Decibels and levels](https://juddisjudd.github.io/audiocn-svelte/docs/concepts/decibels.md): The units audiocn-svelte uses, and the helpers in the audio core that convert between them.
- [Feeding data](https://juddisjudd.github.io/audiocn-svelte/docs/concepts/feeding-data.md): Every meter and visualizer accepts levels three ways, so it fits any audio source.
- [Theming](https://juddisjudd.github.io/audiocn-svelte/docs/concepts/theming.md): audiocn-svelte uses your shadcn theme, plus six audio tokens you can change like any other.
- [Accessibility](https://juddisjudd.github.io/audiocn-svelte/docs/concepts/accessibility.md): How audiocn-svelte components work with keyboards, screen readers and reduced motion.
- [Using your own audio engine](https://juddisjudd.github.io/audiocn-svelte/docs/concepts/custom-engine.md): Drive audiocn-svelte from a native backend, a WebSocket, a worker or anything else.

## Components
- [Components](https://juddisjudd.github.io/audiocn-svelte/docs/components.md): Every audiocn-svelte component, grouped by what it does.
- [Level Meter](https://juddisjudd.github.io/audiocn-svelte/docs/components/level-meter.md): A peak and RMS level meter with zones, peak hold, a scale, a readout and a clip light.
- [dB Scale](https://juddisjudd.github.io/audiocn-svelte/docs/components/db-scale.md): Tick marks and labels for a decibel range, shared by meters and faders.
- [dB Readout](https://juddisjudd.github.io/audiocn-svelte/docs/components/db-readout.md): A numeric level label that updates at a readable rate and never shifts the layout.
- [Clip Indicator](https://juddisjudd.github.io/audiocn-svelte/docs/components/clip-indicator.md): A clip light that holds after the signal clips, with an optional count and click to reset.
- [Bar Visualizer](https://juddisjudd.github.io/audiocn-svelte/docs/components/bar-visualizer.md): A row of bars driven by frequency bands, with idle, loading and mirrored modes.
- [Electric Bar Visualizer](https://juddisjudd.github.io/audiocn-svelte/docs/components/electric-bar-visualizer.md): Frequency-band bars drawn as crackling filaments, with arcs between loud neighbours and sparks on sudden rises.
- [Electric Waveform](https://juddisjudd.github.io/audiocn-svelte/docs/components/electric-waveform.md): One electric line across the width, with a crackling white-hot core, a tall glow, forks off the peaks and sparks.
- [Smooth Waveform](https://juddisjudd.github.io/audiocn-svelte/docs/components/smooth-waveform.md): One clean line across the width that follows the sound, as a flowing wave or an oscilloscope trace.
- [Live Waveform](https://juddisjudd.github.io/audiocn-svelte/docs/components/live-waveform.md): A canvas waveform of a live signal, as scrolling history or the current frame.
- [Waveform](https://juddisjudd.github.io/audiocn-svelte/docs/components/waveform.md): A static waveform of a clip with a smooth playhead, seeking, hover time, regions and markers.
- [Spectrum](https://juddisjudd.github.io/audiocn-svelte/docs/components/spectrum.md): A frequency spectrum analyser with axes, a grid and peak hold.
- [Fader](https://juddisjudd.github.io/audiocn-svelte/docs/components/fader.md): A volume fader in decibels, with tapers, detents, a scale, reset and an editable value.
- [Parameter Slider](https://juddisjudd.github.io/audiocn-svelte/docs/components/parameter-slider.md): A labelled slider with a numeric input, unit, marks and reset, for everything that is not a volume.
- [Knob](https://juddisjudd.github.io/audiocn-svelte/docs/components/knob.md): A rotary control for dense layouts, drawn in SVG.
- [Pan Control](https://juddisjudd.github.io/audiocn-svelte/docs/components/pan-control.md): Left and right balance with a fill from the centre and a centre detent.
- [Channel Toggle](https://juddisjudd.github.io/audiocn-svelte/docs/components/channel-toggle.md): Mute, solo and monitor toggle buttons with their own pressed colours.
- [Volume Control](https://juddisjudd.github.io/audiocn-svelte/docs/components/volume-control.md): A simple volume slider with a mute button, for players.
- [Audio Device Select](https://juddisjudd.github.io/audiocn-svelte/docs/components/audio-device-select.md): A microphone, speaker or source picker with permission, loading and disconnected states.
- [Channel Strip](https://juddisjudd.github.io/audiocn-svelte/docs/components/channel-strip.md): One channel of a mixer, as a row or a console strip, composed from the parts you need.
- [Mixer](https://juddisjudd.github.io/audiocn-svelte/docs/components/mixer.md): The container for channel strips, with shared meter settings and keyboard navigation.
- [Audio Player](https://juddisjudd.github.io/audiocn-svelte/docs/components/audio-player.md): A composable audio player with transport, seeking, time, volume, rate, loop and keyboard shortcuts.
- [Track List](https://juddisjudd.github.io/audiocn-svelte/docs/components/track-list.md): A list of tracks with active and playing states and arrow-key navigation.
- [Sound Pad](https://juddisjudd.github.io/audiocn-svelte/docs/components/sound-pad.md): A trigger pad with modes, a hotkey, playback progress and an accent colour.

## Hooks
- [useDemoSignal](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-demo-signal.md): A synthetic speech, music, tone or noise signal as frame sources, for previews, prototypes and tests.
- [useFrameSource](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-frame-source.md): Subscribe a callback to a frame source, with automatic cleanup.
- [useLevel](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-level.md): Read a meter source into Svelte state at a low rate, for labels and conditional UI.
- [useClipHold](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-clip-hold.md): Clip detection with a hold time, a clip count and a reset.
- [useReducedMotion](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-reduced-motion.md): True when the user asked the system to reduce motion.
- [useVisibility](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-visibility.md): Whether an element is on screen, without state updates, so animation loops can skip frames nobody sees.
- [useAudioContext](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-audio-context.md): One shared AudioContext that resumes on the first user gesture, plus a setter to supply your own.
- [useGainNode](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-gain-node.md): A gain node on the shared AudioContext, wired from an input to a destination, with click-free level changes.
- [useAudioAnalyser](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-audio-analyser.md): Meter and visual frame sources from a MediaStream, media element or AudioNode.
- [useAudioDevices](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-audio-devices.md): The list of audio input or output devices, with permission state and live updates.
- [useMicrophone](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-microphone.md): Open a microphone as a MediaStream, with browser processing off by default.
- [useSystemAudio](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-system-audio.md): Capture system or tab audio through the browser's screen-share picker.
- [useMixer](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-mixer.md): Mixer state with no audio attached: gain, mute, solo, pan and monitor per channel, plus a master.
- [useWebAudioMixer](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-web-audio-mixer.md): Binds mixer state to a Web Audio graph, with ducking, monitor sends, a limited master and meters.
- [useAudioPlayer](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-audio-player.md): Playback state for an audio element the hook owns.
- [useSound](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-sound.md): Low-latency playback of short sounds decoded into memory.
- [useWaveformData](https://juddisjudd.github.io/audiocn-svelte/docs/hooks/use-waveform-data.md): Decode an audio file and reduce it to cached waveform peaks.

## Blocks
- [Blocks](https://juddisjudd.github.io/audiocn-svelte/docs/blocks.md): Complete, working assemblies you install once and then make your own.
- [System Audio Mixer](https://juddisjudd.github.io/audiocn-svelte/docs/blocks/system-audio-mixer.md): The complete mixer, with microphone, system audio, music, sound pads and a master, running on Web Audio.
- [Microphone Setup](https://juddisjudd.github.io/audiocn-svelte/docs/blocks/mic-setup.md): Choose and check a microphone, with a live preview, a meter, gain, mute and a level check.
- [System Audio Settings](https://juddisjudd.github.io/audiocn-svelte/docs/blocks/system-audio-settings.md): Turn system audio capture on, set its level and see what the browser captures.
- [Quick Audio Popover](https://juddisjudd.github.io/audiocn-svelte/docs/blocks/quick-audio-popover.md): Microphone and system audio controls behind one toolbar button that shows a live level.
- [Soundboard](https://juddisjudd.github.io/audiocn-svelte/docs/blocks/soundboard.md): Sound pads with hotkeys, modes, volume, stop all and drag-and-drop.
- [Music Player](https://juddisjudd.github.io/audiocn-svelte/docs/blocks/music-player.md): A playlist player with a waveform seek bar, shuffle, repeat and ducking under the microphone.