audiocnClip Indicator
A clip light that holds after the signal clips, with an optional count and click to reset.
Installation
$ pnpm dlx shadcn@latest add @audiocn/clip-indicatorUsage
import { ClipIndicator } from "@/components/ui/clip-indicator";<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. Use actionsRef to report 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