∞ forever components

Audio Visualizers

VU Meter

Cream analog VU meter with a spring-damped needle, dB scale, red peak zone, and peak-hold pip. Synth signal by default; click switches to live mic.

canvasmedium complexitymoderate motionclick

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Audio player UIs, music apps, podcast tools, or any context needing a retro analog meter aesthetic with optional live mic input.

When not to

Contexts where microphone permission prompts would confuse users, or where a purely decorative loop with no interaction is needed.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the face color from '#f4ede0' to '#1a2a1a' (dark military green) and ACC from '#22d3ee' to '#00ff88', then widen the red zone by setting redA from 0.30 to 0.20.

Safe to edit

  • face color (FACE = '#f4ede0')
  • accent/pip color (ACC = '#22d3ee')
  • red zone start angle (redA = 0.30)
  • spring stiffness/damping (k=120, c=14)
  • synth signal shape (env/beat/body sines)
  • peak-hold decay rate (peakV += 0.9*dt)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion static-frame guard
  • visibilitychange pause/resume
  • AudioContext never connected to destination (no feedback)

Known limitations

  • Live mic cannot be toggled off without a page reload
  • Microphone access requires HTTPS in production
  • Needle position has no aria live region — visual-only for screen readers

vu-meteraudiocanvasanalogneedlemicrophonespring-physics

More Audio Visualizers components

  • Spectrum Bars56 mirrored chartreuse-gold frequency bars animate with gravity peak-hold caps on a dark canvas; a "live" button switches from synth simulation to real…
  • Radial Spectrum96 cyan radial bars radiate from a bass-driven pulsing core around a slowly rotating ring; driven by a synthetic signal or live mic input on click.
  • OscilloscopeCyan phosphor-glow waveform sweeps across a faint scope grid with ghosting persistence trail; click to upgrade to live microphone input.
  • Lissajous ScopeCyan Lissajous figure drifts and rotates on a dark scope grid with phosphor trail decay and a glowing beam head; a Live button upgrades to real mic input.
  • Waveform RiverMirrored cyan waveform ribbon scrolls right-to-left on dark; glowing dot marks the live head. Click LIVE to switch from synthetic signal to microphone.
  • Beat BloomCyan concentric rings bloom outward and particles burst radially on detected bass beats from a synth signal; a breathing center dot pulses continuously.