components / spectrum
spectrum.
live frequency analyser off a web audio AnalyserNode (or any sample callback). canvas, logarithmically-spaced columns, instant attack and gradual decay so it reads as loudness instead of strobing. waveform is the static counterpart — a shape that never repaints.
installation
bunx @justin06lee/chrome@latest add spectrumprops
| name | type | default | description |
|---|---|---|---|
| analyser | AnalyserNode | - | web audio analyser to read; create it once and hand it over, the component only reads. |
| sample | (time: number) => number[] | - | escape hatch for anything that isn't a web audio graph — return `bars` magnitudes in 0–1 per frame. ignored when analyser is set. |
| bars | number | 40 | column count. |
| height | number | 64 | |
| barWidth | number | 6 | widest a column may get; columns flex to fill. |
| gap | number | 2 | |
| accent | string | '#fff' | |
| mirror | boolean | false | mirror the columns around the centre line. |
| decay | number | 0.12 | fall speed per frame, 0–1. lower falls slower. |
| peakHold | boolean | true | hold a thin cap at each column's recent maximum. |
| paused | boolean | false | stop reading and let the columns settle to the floor. |
| ariaLabel | string | 'audio spectrum' | |
| className | string | - |