OneTaskBy Tim King · Updated
Music Visualiser
Microphone-Driven Bars, Waveform or Circle With Gain, Colour and Trail Controls
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Music Visualiser works
This music visualiser reacts to sound from the microphone. Press Play, allow the microphone when the browser asks, and play some music in the room. The canvas draws bars, a circle or a waveform that move with the sound. Turn the sensitivity up for quiet sources, pick a colour, add a trail and put it fullscreen. The audio never leaves your computer.
Music visualiser: how it works
A music visualiser needs two things: a source of sound and a way to measure it. This page uses the microphone as the source, because that works with whatever is playing — a speaker across the room, a record player, an instrument — without having to route audio through the browser. The measurement is done by the browser's built-in audio analysis, which takes the microphone signal and, many times a second, works out how much energy there is at each frequency and what the raw waveform looks like at that instant.
Bars. The frequency data is split into as many groups as the Bars slider sets, low frequencies on the left and high on the right, and each bar's height is the average energy in its group. The top 40 per cent of the frequency range is dropped because there is rarely anything there in music and it would leave the right-hand bars flat. Fewer bars gives a chunky equaliser; more gives a fine spectrum.
Circle. The same bars arranged around a ring, starting at the top and going clockwise, with the bass at twelve o'clock. This is the style that works best fullscreen on a wall.
Waveform. The raw signal drawn left to right, the way an oscilloscope shows it. It is quieter to look at than the bars and shows rhythm more than pitch.
Sensitivity and trail. Sensitivity multiplies everything, so a quiet source can still fill the screen and a loud one can be tamed. Trail sets how much of the previous frame survives: at 1 each frame is drawn fresh, at 10 the bars leave ghosts that decay slowly and the picture smears into a glow. Colour sets the base hue; bars and the circle spread the hues around the wheel from that starting point.
Privacy. The microphone is opened only when you press Play, the sound is analysed in the browser and discarded on the spot, and nothing is recorded, stored or sent anywhere. Restart and leaving the page both release the microphone, which you can confirm from the recording indicator in the browser's tab.
FAQ
Why does it ask for microphone permission?
Because it listens to the room to draw the picture. The browser asks once per site; if you refuse, the canvas stays black and the status line says so. Allow it in the address bar and press Restart to try again.
Can it visualise the audio from a tab or a file instead?
Not this version. The microphone is the one source that works for everything, including music coming from a different device. Playing through speakers near the computer's microphone gives a strong signal; earphones give nothing, since the microphone cannot hear them.
Why do the bars barely move?
Either the source is quiet or the microphone is far from it. Raise the sensitivity first; at 10 even a whisper registers. If nothing moves at all, check that the browser is using the microphone you expect, since laptops with an external audio interface often default to the wrong input.
See also: all Simulations & Screensavers tools, Images, Audio, Video & Screen, PDF, SVG, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Plasma Effect
Swirling demoscene colour with speed, scale and palette; fullscreen.
Fireworks
Rockets, bursts and fading sparks; click to launch; fullscreen.
Matrix Rain
Falling green code with speed, size, trail and colour; fullscreen.
Lava Lamp
Blobs that rise, merge and split; four colours, fullscreen.
Waveform Video
Animated sound bars over cover art, for podcast and music clips.