Generate real-time audio visualizations with waveform, spectrum, and bar displays.
This tool routes an audio source - a microphone or an uploaded/played file - through a live analysis node and redraws a canvas on every animation frame in one of three styles: a scrolling waveform, a frequency spectrum, or a bar display. It is a monitor, not an editor: nothing about the audio itself is changed or saved. The most common surprise is that switching styles changes what's being measured - waveform tracks raw amplitude over time, while spectrum and bars track frequency energy - so a loud but bass-heavy signal can look flat in one view and lively in the other.
The audio source connects to an analyser that continuously exposes two views of the signal: time-domain samples (raw waveform amplitude) and frequency-domain magnitudes (energy per frequency bin, via FFT). Waveform mode reads the first; spectrum and bar modes read the second. Neither view alters the audio passing through - the analyser just taps the stream.
On every animation frame, the current analyser data is pulled and mapped to pixels: a connected line for waveform, or a column of bar heights for spectrum/bars. Because this repeats continuously while audio plays, the display is a live view, not a saved image - closing or navigating away discards it unless you capture the screen separately.
I'm not confident this tool includes a recording or export feature. If it doesn't, the reliable option is to use your operating system's screen recorder while the visualization is running, then trim the result afterward.
Waveform mode plots raw amplitude over time, so quiet-but-broadband sound reads as a small ripple. Spectrum and bar modes plot frequency energy, so the same sound can produce tall bars in specific ranges even if the waveform looks subdued - they are measuring different things, not disagreeing.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.