Clip Indicator
A clip light that holds after the signal clips, with an optional count and click to reset.
Installation
$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/clip-indicator.json$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/clip-indicator.json$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/clip-indicator.json$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/clip-indicator.jsonUsage
<script lang="ts">
import { ClipIndicator } from "#lib/components/ui/clip-indicator/index.js";
</script>
<ClipIndicator source={analyser.meter} />The light turns on when any channel reaches −1 dBFS and stays on for 1.5 s. Clicking it resets the light and the count. Its size never changes, so turning on never moves the layout.
Examples
Latching, driven by hand
Set holdMs to Infinity to keep the light on until someone resets it. Bind the component with bind:this and call report to feed levels from your own code.
Controlled
Pass clipping when another part of your app decides whether the signal clipped.
<ClipIndicator clipping={engine.clipped} onclick={engine.resetClip} />Theming
| Token or attribute | Meaning |
|---|---|
--meter-clip | Color of the light when on |
data-clipping | The light is on |
Children replace the default dot, so the light can be a word, an icon or anything else. Use group-data-clipping/clip-indicator: to style children.
Accessibility
- A real
<button>. Its label changes to "Clipping. Reset clip indicator" while the light is on. - A polite live region announces "Clipping" once per clip.
API reference
| Prop | Type | Default |
|---|---|---|
clipping Controlled state. When set, the component does no detection. | boolean | — |
source Detects clipping from a meter source. | FrameSource<MeterFrame> | null | — |
thresholdDb Levels at or above this count as a clip. | number | -1 |
holdMs How long the light stays on. Infinity latches. | number | 1500 |
onClippingChange | (clipping: boolean) => void | — |
showCount Show the number of clips. | boolean | false |
children Replaces the default dot. | Snippet | — |
child Renders your own element. Spread props on it. | Snippet<[{ props, clipping, count }]> | <button> |
Exported functions
Bind the component with bind:this to call them. Their type is ClipIndicatorActions.
| Prop | Type | Default |
|---|---|---|
report Feed a level reading. | (db: number) => void | — |
reset Turn the light off and clear the count. | () => void | — |