dB Readout
A numeric level label that updates at a readable rate and never shifts the layout.
Peak −∞ dB RMS −∞ dB Peak, held 1 s −∞ dB Value −6.0 dB
Installation
$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/db-readout.json$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/db-readout.json$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/db-readout.json$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/db-readout.jsonUsage
<script lang="ts">
import { DbReadout } from "#lib/components/ui/db-readout/index.js";
</script>
<DbReadout source={analyser.meter} />With a source, the readout updates its own text four times a second without going through Svelte state. Its width is reserved for the longest value, so the text never pushes neighbouring elements around.
Examples
Color by zone
The readout sets data-zone and data-silent, so it can change color with plain Tailwind classes.
−∞ dB
Theming
| Data attribute | Meaning |
|---|---|
data-zone | ok, warn or clip |
data-silent | The level is at or below floorDb |
API reference
| Prop | Type | Default |
|---|---|---|
value A level in dB, for declarative use. | number | — |
source Updates the text without going through Svelte state. | FrameSource<MeterFrame> | null | — |
measure | "peak" | "rms" | "peak" |
channel A channel index, or the loudest channel. | number | "max" | "max" |
intervalMs How often the text changes. | number | 250 |
holdMs Show the highest value within this window. | number | 0 |
decimals | number | 1 |
unit Append " dB". | boolean | true |
floorDb At or below this, show "−∞". | number | -60 |
zones Zones used for data-zone. | MeterZone[] | DEFAULT_ZONES |
format Replaces all formatting. | (db: number) => string | — |