useLevel

Meters paint every frame without Svelte state. When you need the level in your markup, for a label or to show a warning, useLevel samples the source a few times a second.

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

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

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

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

Usage

<script lang="ts">
	import { useLevel } from "#lib/hooks/use-level.svelte.js";

	const level = useLevel(() => analyser.meter);
</script>

{#if level.zone === "clip"}
	<p>Turn your microphone down.</p>
{/if}

Call it during component setup. The source and the options can be getters, such as () => ({ intervalMs }). The returned fields are getters too: read them from the object, such as level.peakDb. Destructuring reads them once and loses updates.

Options

Returns