Level Meter

Installation

$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/level-meter.json

$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/level-meter.json

$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/level-meter.json

$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/level-meter.json

Usage

<script lang="ts">
	import { LevelMeter } from "#lib/components/ui/level-meter/index.js";
</script>

<LevelMeter aria-label="Microphone level" peakDb={-12} />

With no children, LevelMeter renders one track per channel with a peak bar and a peak-hold tick. Add children to control the anatomy.

Anatomy

<LevelMeter source={analyser.meter}>
	<LevelMeterChannels>
		<LevelMeterChannel index={0}>
			<LevelMeterTrack>
				<LevelMeterBar measure="rms" />
				<LevelMeterBar measure="peak" />
				<LevelMeterHold />
			</LevelMeterTrack>
		</LevelMeterChannel>
		<LevelMeterScale />
	</LevelMeterChannels>
	<LevelMeterValue />
	<LevelMeterClip />
</LevelMeter>

Examples

Default

Values

Pass peakDb (and optionally rmsDb) for data that arrives slowly. The meter still moves smoothly between updates.

Vertical

Variants

Peak and RMS

Layer an rms bar over a translucent peak bar for a dual meter.

Ballistics

peak rises in 15 ms and falls steadily; vu is slow and averaged; instant follows the input exactly.

Colors and zones

Override the meter tokens with a class, or pass your own zones.

Build your own visual

Each channel writes its live level to --meter-level (0..1). Anything inside a LevelMeterChannel can use it in CSS.

Microphone

Feeding data

A meter accepts levels three ways. See Feeding data.

<script lang="ts">
	import { LevelMeter, type LevelMeterActions } from "#lib/components/ui/level-meter/index.js";

	let meter = $state<LevelMeterActions>();

	// From your own frame loop:
	const onFrame = (peakDb: number) => meter?.paint({ channels: [{ peakDb }] });
</script>

<!-- A source: subscribes and paints itself, without going through Svelte state. -->
<LevelMeter source={analyser.meter} />

<!-- Values: for slow data. Ballistics smooth the movement. -->
<LevelMeter peakDb={-9.1} rmsDb={-18} />

<!-- A handle: for callers that own their own frame loop. -->
<LevelMeter bind:this={meter} />

Theming

Accessibility

• The root has role="meter" with aria-valuemin, aria-valuemax and aria-valuenow in dB, and aria-valuetext such as "−12.0 dB". These update at most four times a second.
• Give every meter a name with aria-label or aria-labelledby.
• With reduced motion, the meter shows the current level four times a second instead of animating.

API reference

LevelMeter

Exported functions

Bind the component with bind:this to call them. Their type is LevelMeterActions.

LevelMeterChannel

LevelMeterBar

LevelMeterScale, LevelMeterValue, LevelMeterClip

These wrap DbScale, DbReadout and ClipIndicator, and take their props. The range, orientation and data come from the meter. LevelMeterClip exports the same report and reset functions as ClipIndicator.