Playground

Adjust the controls below and the component updates in real time. The Generated HTML snippet at the bottom shows exactly what attributes and styles to copy into your own project.

Microphone required

Click Start microphone and grant browser permission to see the bars animate. The component visualises the actual frequency content of your voice — try speaking, snapping, or whistling.

Size icon — 24 px sm — 56 px md — 112 px lg — 224 px xl — 448 px

Color

Bar count

Transition — 100 ms

Microphone Default microphone

▶ Start microphone ⏹ Stop

Loading component…

Generated HTML

---

Try these things

• Switch sizes — notice how icon and sm default to 3 bars, while md/lg/xl default to 5
• Change colour — the bars pick up the CSS custom property instantly, no page reload
• Drag the transition slider — at 20 ms bars snap hard to each frame; at 500 ms the motion is very smooth
• Set bar count to 2 — the two bands track bass vs. treble content of your voice