A framework-agnostic Lit WebComponent that displays real-time microphone audio as animated frequency-band bars.
Ported from LiveKit's AgentAudioVisualizerBar — same dB-normalised multiband analysis, no LiveKit dependency.
npm
npm install @warrenbuckley/audio-visualizer litCDN (no install)
<script type="module"
src="https://cdn.jsdelivr.net/npm/@warrenbuckley/audio-visualizer/dist/audio-visualizer.standalone.js">
</script><!doctype html>
<html>
<body>
<audio-visualizer id="viz" size="md" style="--audio-visualizer-color: #6366f1"></audio-visualizer>
<button id="btn">Start microphone</button>
<script type="module"
src="https://cdn.jsdelivr.net/npm/@warrenbuckley/audio-visualizer/dist/audio-visualizer.standalone.js">
</script>
<script type="module">
document.getElementById('btn').addEventListener('click', async () => {
await document.getElementById('viz').startMicrophone();
});
</script>
</body>
</html>Save as .html and open in any modern browser — HTTPS or localhost required for microphone access.
The component runs a small Web Audio API pipeline entirely in the browser — no external audio library:
Microphone
└─ getUserMedia()
└─ MediaStreamAudioSourceNode
└─ AnalyserNode (fftSize = 2048)
└─ getFloatFrequencyData() ← called every animation frame
└─ bins [100–199] ← ~2–5 kHz speech presence range
└─ normalizeDb() ← dB → [0, 1] with √ curve
└─ split into N equal bands
└─ mean per band → bar heights
Full design notes — why those frequency bins, why the √ curve, and how the Lit component is structured — in the Architecture docs.
Full docs, playground, and API reference → warrenbuckley.github.io/audio-visualizer
| API | Chrome | Firefox | Safari |
|---|---|---|---|
| Custom Elements v1 | 67+ | 63+ | 10.1+ |
Web Audio API (AnalyserNode) |
35+ | 25+ | 14.1+ |
getUserMedia |
53+ | 36+ | 11+ |
| ES Modules | 61+ | 60+ | 10.1+ |
Note:
getUserMediarequires a secure context (HTTPS orlocalhost).
See CONTRIBUTING.md for dev setup, build commands, and publishing steps.
- Original React component: LiveKit
AgentAudioVisualizerBar - Frequency analysis: ported from LiveKit's
useMultibandTrackVolume - Built with Lit