Equalizer

Animated spectrum bars, optionally driven by real audio.

Harbour Lights

Low Tide Radio · Side B

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/equalizer.json

import { Equalizer } from "@/components/ui/equalizer"

<Equalizer playing bars={24} height={120} />

Pass an audio element and the bars read its spectrum through an AnalyserNode. The loop here is synthesized in the browser, so nothing is downloaded.

segments splits each bar into cells, like a hi-fi spectrum display.

Four bars without peak caps make a now-playing glyph. Click the active track to pause it.

Renders a div holding a canvas and accepts div attributes; the ref points at the div. It fills its container's width.

Prop	Type	Default
`bars`	`number` Number of frequency bands.	`24`
`playing`	`boolean` Bars move while true and settle to rest when false.	`true`
`audio`	`HTMLAudioElement \| null` Drive the bars from this element's real spectrum. The AudioContext is created on the element's first play event, so it starts after a user gesture.	None
`height`	`number` Height in pixels.	`120`
`gap`	`number` Space between bars in pixels.	`3`
`segments`	`number` Split each bar into this many LED cells. 0 draws solid bars.	`0`
`peaks`	`boolean` Peak caps that hold the recent high, then drop.	`true`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited

It's decorative and hidden from screen readers by default. Pass aria-label to expose it as an image, and keep the playback state in your own controls.
With audio, the element's sound is routed through Web Audio. Cross-origin files need CORS headers and crossOrigin="anonymous" on the element, or the browser outputs silence.
Each audio element can feed only one Web Audio graph, so every Equalizer on the same element shares one analyser.
The canvas pauses while it's off screen or the tab is hidden, and redraws at the device pixel ratio (capped at 2) when it resizes.
With reduced motion, simulated bars hold one still frame. Real audio still reads out, a few times a second and without easing.