Components / Audio Meter

Audio Meter

A single-bar volume meter for a playing audio element: a Web Audio AnalyserNode merges both channels into one peak level.

import { AudioMeter } from '@layers/ui/audio-meter'

No live demo

It needs a live audio element playing through an AudioContext resumed by a user gesture, so a static page cannot show it; see it in the product audio tools.

House rules

• Props are the live audio element and isPlaying; the meter attaches an analyser to the element and routes it back to the output.
• Zero React re-renders during playback: a requestAnimationFrame loop writes the bar height straight to the DOM.
• One AudioContext is shared across all meters, and the source node per audio element is cached (createMediaElementSource can only be called once per element).
• Styles ship with the component (audio-meter.css is self-imported).