shadcn.io is not affiliated with official shadcn/ui
Audio Spectrum Music Block for Vue
A frozen analyzer frame: 30 third-octave bars from 25 Hz to 20 kHz taken from one of eight frames of a song, peak-hold ticks, a Bars, Line and Octave display switch, a frame slider and a list that reads the loudest band and the low-end share.
Installation
Overview
Let people look at the shape of a song's sound without a microphone, with this spectrum analyzer for Vue with Ark UI. It shows Peakhold, a mastering analyzer, with a stage that draws 30 bars, one for every third of an octave from 25 Hz to 20 kHz, from one of eight typed frames of a song (Intro, Verse, Pre-chorus, Chorus and so on). A tick on every band holds the loudest level seen up to that frame, and a Peak hold Switch turns the ticks off. The header holds a Toggle Group for the display: Bars, Line, or Octave, which averages the 30 bands in threes into ten. A frame Slider moves through the song and the bars ease to their new heights. A list under it reads the frame: the loudest band and its level, how much of the energy sits below 250 Hz, and where in the song it is. It's built from Toggle Group, Switch, Slider and Guides, with plain elements for the bars and a CSS transition only. For mastering, mixing and audio tools.
FAQ
How do I use my own frames?
The eight frames are described by a few numbers each in FRAMES (how heavy the low, mid and high humps are, where the bass hump sits and the overall energy) and turned into 30 levels, in whole decibels from −60 to 0, by a small helper with a fixed hash for the ripple, so the server and the browser draw the same thing. Replace LEVELS with your own arrays of 30 values per frame, measured from your audio, and keep the rest.
Is this live, and does it use the microphone?
No. It is a capture of typed numbers: nothing listens, nothing uses the Web Audio API or the microphone, and no audio plays in this demo. To make it real, read an analyser node's frequency data each frame and group the bins into third-octave bands.
How does Octave work?
Each octave band is the mean, in decibels, of three neighbouring third-octave bands, so there are ten bars centred on 31.5 Hz, 63, 125, 250, 500, 1 kHz, 2, 4, 8 and 16 kHz. The peak ticks are averaged the same way.
How are the loudest band and the low end worked out?
The loudest band is the one with the highest level in the frame, first one if two tie. The low-end share converts each level to power, adds up the bands below 250 Hz and divides by the total, rounded to a whole percent. The same helpers feed the list and the status line.