Skip to content
<audio-visualizer>
Ported from LiveKit's React AgentAudioVisualizerBar as a WebComponent

Audio Visualizer

Real-time microphone audio as animated frequency-band bars. A Lit WebComponent — zero dependencies beyond Lit, works in any framework.
Get started Playground

Why <audio-visualizer>?

Section titled “Why <audio-visualizer>?”

Drop-in ready

One import registers the element globally. No framework setup, no build tool required when using the standalone CDN build.

Framework agnostic

Works in plain HTML, React, Vue, Angular, Svelte — anywhere you can write a custom element tag.

Faithful to LiveKit

Ported from LiveKit’s AgentAudioVisualizerBar. Uses the same dB-normalised multiband analysis — the visual behaviour matches exactly.

Themeable

CSS custom properties (--audio-visualizer-color, --audio-visualizer-transition) make it fit any design system.

Minimal example

Section titled “Minimal example”

  1. Import the component into your MDX file:

    <script
       type="module"
       src="https://cdn.jsdelivr.net/npm/@warrenbuckley/audio-visualizer/dist/audio-visualizer.standalone.js">
    </script>

  2. Add the element <audio-visualizer>

    <audio-visualizer
       id="viz"
       size="md"
       style="--audio-visualizer-color: #6366f1"
    ></audio-visualizer>
    

    <button id="btn">Start microphone</button>

  3. Add script to trigger

    <script type="module">
      document.getElementById("btn").addEventListener("click", async () => {
        await document.getElementById("viz").startMicrophone();
      });
    </script>

  4. Save as an .html file and open in any modern browser (served via HTTPS or localhost for mic access).