Spectrum visualizer
A demo of a custom spectrum visualisation component for microphone recording interfaces.
At a glance
- TypeScript, React, Web Audio
Tags
A demo application of a custom spectrum visualisation component: real-time audio visualisation from the microphone, with customisable colour schemes and a responsive layout.
The component draws the spectrum as a row of bars, one per frequency band. The demo has a light and a dark theme and lets you try its variants and colours, with options to interpolate the colours along the bars and to draw a faint ghost layer behind them.
The code is small on purpose. The component that processes the audio is one file, the amplitude indicators another, and the layout a third. It is released under the MIT licence, with a request to credit the work when it is republished without significant changes.
