Smooth Waveform
One clean line across the width that follows the sound, as a flowing wave or an oscilloscope trace.
Installation
$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/smooth-waveform.json$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/smooth-waveform.json$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/smooth-waveform.json$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/smooth-waveform.jsonUsage
<script lang="ts">
import { SmoothWaveform } from "#lib/components/ui/smooth-waveform/index.js";
</script>
<SmoothWaveform aria-label="Voice activity" class="h-24 text-primary" source={analyser.visual} />The line takes its color from the text color. It is the plain version of the electric waveform: the same shape, with no crackle, glow or sparks.
The waveform fills its container, so size it with classes. It paints on the animation frame without going through Svelte state, redraws on resize and picks up theme changes on its own.
Examples
Wave and scope
wave draws a smooth wave shaped by the frequency bands, calm enough for a voice assistant. scope draws the signal itself, like an oscilloscope, and starts each frame on a rising zero crossing so steady tones stand still.
Idle and loading
With no signal the line rests flat. loading runs a pulse along it, for connecting or thinking states.
Microphone
Theming
| Variable or attribute | Meaning |
|---|---|
--waveform | Line color, default currentColor |
data-mode | wave or scope |
data-active | The signal is above the floor |
data-loading | The loading pulse is running |
Accessibility
The root has role="img" and the label "Audio waveform". Pass aria-label to describe what it shows, or aria-hidden when it is decorative next to a labelled meter. With reduced motion the wave stops drifting and the line redraws four times a second.
API reference
| Prop | Type | Default |
|---|---|---|
source | FrameSource<VisualFrame> | null | — |
mode wave follows the frequency bands; scope draws the signal. | "wave" | "scope" | "wave" |
loading Run a pulse along the line. | boolean | false |
sensitivity Visual gain. | number | 1 |
lineWidth Pixels. | number | 2 |
fadeEdges Fade the left and right ends. | boolean | true |
Exported functions
Bind the component with bind:this to call them. Their type is SmoothWaveformActions.
| Prop | Type | Default |
|---|---|---|
paint Paint a frame directly. | (frame: VisualFrame) => void | — |
clear Forget the last frame, so the line falls flat. | () => void | — |