useDemoSignal
A synthetic speech, music, tone or noise signal as frame sources, for previews, prototypes and tests.
useDemoSignal makes meters and visualizers move without a microphone. Every preview on this site runs on it. The signal is repeatable for a given seed, and it only runs while something is subscribed.
$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-demo-signal.json$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-demo-signal.json$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-demo-signal.json$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-demo-signal.jsonUsage
<script lang="ts">
import { LevelMeter } from "#lib/components/ui/level-meter/index.js";
import { useDemoSignal } from "#lib/hooks/use-demo-signal.svelte.js";
const signal = useDemoSignal({ kind: "music", channels: 2 });
</script>
<LevelMeter aria-label="Demo level" source={signal.meter} />Call it during component setup. The options can be a getter, such as () => ({ kind, playing }); the signal follows them without being created again.
Pass a fader's value as gainDb to meter the signal after gain. Set playing: false to mute it. Gain changes preserve the signal's timing and subscriptions, and boosted readings can exceed 0 dBFS.
Options
| Prop | Type | Default |
|---|---|---|
kind What the signal sounds like. | "speech" | "music" | "tone" | "noise" | "silence" | "speech" |
channels 1 for mono, 2 for stereo. | number | 1 |
gainDb Gain applied to meter and visual frames. -Infinity silences the signal. | number | 0 |
seed Changes the pattern while keeping it repeatable. | number | 1 |
bands Frequency bands per visual frame. | number | 32 |
historySize Entries in the level history ring. | number | 60 |
historyIntervalMs Time between history entries. | number | 50 |
playing When false the signal falls silent, so meters fall. | boolean | true |
Returns
| Prop | Type | Default |
|---|---|---|
meter Peak and RMS per channel, every animation frame. | FrameSource<MeterFrame> | — |
visual Bands, level history and time-domain samples. | FrameSource<VisualFrame> | — |
configure Change options without creating a new signal. | (options) => void | — |
Outside a component, createDemoSignal(options) returns the same object.