Bar Visualizer
A row of bars driven by frequency bands, with idle, loading and mirrored modes.
Installation
$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/bar-visualizer.json$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/bar-visualizer.json$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/bar-visualizer.json$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/bar-visualizer.jsonUsage
<script lang="ts">
import { BarVisualizer } from "#lib/components/ui/bar-visualizer/index.js";
</script>
<BarVisualizer aria-label="Voice activity" source={analyser.visual} />Bars take their color from the text color, so set it with a class such as text-primary. Bars paint on the animation frame without going through Svelte state.
Examples
Alignment
Idle and loading
idle decides what bars do without a signal. loading runs a sweep, for connecting or thinking states.
Mirrored
Inside a badge
Theming
| Variable or attribute | Meaning |
|---|---|
--bar-width | Maximum bar width, default 0.375rem |
--bar-gap | Gap between bars, default 0.1875rem |
--bar-radius | Bar corner radius, default fully rounded |
data-active | The signal is above the floor |
data-loading | The sweep is running |
data-index | On each bar, its position |
Accessibility
The root has role="img" and the label "Audio visualizer". Pass aria-label to describe what it shows, or aria-hidden when it is decorative next to a labelled meter.
API reference
| Prop | Type | Default |
|---|---|---|
source Bars follow the frame's frequency bands. | FrameSource<VisualFrame> | null | — |
levels Levels, 0..1, for declarative use. | ArrayLike<number> | — |
barCount Bands are resampled to fit. | number | 24 |
align Where bars grow from. | "center" | "start" | "end" | "center" |
mirrored Symmetric around the middle bar, lows in the centre. | boolean | false |
minLevel Resting bar size, 0..1. | number | 0.08 |
idle What bars do without a signal. | "static" | "pulse" | "wave" | "static" |
loading Run a sweep animation. | boolean | false |
orientation vertical grows bars sideways. | "horizontal" | "vertical" | "horizontal" |
Exported functions
Bind the component with bind:this to call them. Their type is BarVisualizerActions.
| Prop | Type | Default |
|---|---|---|
paint Paint levels, 0..1, directly. They are resampled to the bar count. | (levels: ArrayLike<number>) => void | — |