useClipHold
Clip detection with a hold time, a clip count and a reset.
useClipHold powers the clip indicator. Feed it every level reading; it tells you when the signal clipped and keeps that state for a while so people can see it.
$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-clip-hold.json$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-clip-hold.json$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-clip-hold.json$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/use-clip-hold.jsonUsage
<script lang="ts">
import { useClipHold } from "#lib/hooks/use-clip-hold.svelte.js";
import { useFrameSource } from "#lib/hooks/use-frame-source.svelte.js";
const clip = useClipHold({ holdMs: 2000 });
useFrameSource(
() => analyser.meter,
(frame) => {
clip.report(frame.channels[0]?.peakDb ?? -Infinity);
}
);
</script>
{#if clip.clipping}
<span>Clipping ({clip.count})</span>
{/if}Call it during component setup. The options can be an object or a getter. Read clipping and count from the returned object: they are getters, so destructuring them loses updates.
Options
| Prop | Type | Default |
|---|---|---|
thresholdDb Levels at or above this count as a clip. | number | -1 |
holdMs How long the clip state holds. Infinity latches until reset(). | number | 1500 |
onClippingChange Called when the state changes. | (clipping: boolean) => void | — |
Returns
| Prop | Type | Default |
|---|---|---|
clipping The clip state, including the hold. | boolean | — |
count Separate clips since mount or the last reset. A long clip counts once. | number | — |
report Feed a level reading. Cheap to call every frame. | (db: number) => void | — |
reset Clear the state and the count. | () => void | — |