shadcn.io is not affiliated with official shadcn/ui
Equalizer Visualizer Music Block for React Aria
A ten-band graphic equalizer drawn as a ladder of thirteen cells a band from plus 12 to minus 12 dB, with a preset select, an Auto preamp switch, a reading of the strongest boost and cut, and the headroom worked out from the largest boost.
Installation
Overview
Let people shape the sound of their music, with this graphic equalizer for React with React Aria. It shows Tenband, an equalizer app, as ten columns from 31 Hz to 16 kHz, each column thirteen cells from +12 dB down to −12 dB in steps of 2 dB. Cells at or below a band's setting are filled in weights, the setting itself is solid and the 0 dB row is ruled, so the whole curve reads as a ladder. A native-select preset in the header (Flat, Rock, Jazz, Bass boost, Vocal, Electronic) fills the columns, and a toolbar holds an Auto preamp Switch and a Reset to flat Button. A reading line says the strongest boost and cut in words ("Rock: +6 dB at 62 Hz, −4 dB at 1 kHz.") and a second line works out the headroom: how far to lower the preamp to avoid clipping. On a phone the ladder scrolls sideways in its own region. It's built from Native Select, Switch, Button and Guides, with native radio buttons for the cells and a CSS entrance only. For players, mastering tools and sound settings.
FAQ
How do I change the bands or the presets?
Edit BANDS for the ten frequencies and PRESETS for the named curves; a preset is ten gains in decibels, each between −12 and 12 in steps of 2. The ROWS list sets the thirteen cells of a column. The select shows Custom when the columns match no preset, and the reading line names the preset or says Custom.
How does a column work?
Each column is a group of thirteen radio buttons named for its frequency. Press a cell to set the band to that gain, or focus the column and use the Up and Down arrows to move the setting one step. Cells at or below the setting are filled in weights and the setting itself is solid. A screen reader hears the band's name for the group and the gain for each cell, for example "62 Hz, plus 6 dB".
How is the headroom worked out?
Boosting a band raises the loudest peak by the same amount, so the largest boost is how far the signal can clip. The second line says "Lower the preamp 6 dB to avoid clipping." Turning on Auto preamp applies exactly that: the preamp reads −6 dB and the line says it was lowered. With no boosted band there is nothing to clip and the line says so.
Is anything applied to the sound?
No. The block draws a setting and reads it back; no audio plays in this demo and nothing uses the Web Audio API. To make it real, create a biquad filter for each band in your player, set its gain from the column and set the preamp gain on a gain node.