sw-audio-level
sw-audio-level
Real-time audio-level meter rendered as a row (or column) of bars.
Pipes a MediaStream through the Web Audio API (AnalyserNode,
fftSize=256, smoothingTimeConstant=0.8) and updates an animation
loop once per frame. Each bar represents an averaged frequency band;
bar height (vertical) or width (horizontal) is proportional to the
average magnitude. Color thresholds:
- level > 0.05 → bar becomes “active” (
--interactive-status-success) - level > 0.40 → yellow (
--interactive-status-warning) - level > 0.70 → red (
--interactive-button-destructive-bg)
The component handles AudioContext / source / analyser teardown
automatically on disconnect, when the source changes, and when
releaseResources() is invoked. Always call releaseResources()
before stopping the underlying MediaStream tracks if you want a
clean, synchronous teardown — used by <sw-device-selector>.
If the supplied stream has no audio tracks, the component logs a warning and renders an empty meter.
Input precedence (most specific wins): .stream > .call (uses
localStream) > context (uses localStream from callStateContext).
Class: SwAudioLevel · Module: packages/web-components/src/components/sw-audio-level.ts
class: SwAudioLevel, sw-audio-level
Fields
stream
Explicit MediaStream to analyze — highest precedence.
call
Explicit Call — when set, analyzes the call’s localStream. Bypassed by .stream if both are set.
bars
Number of bars to display (default: 5)
orientation
Orientation of the bars: ‘vertical’ or ‘horizontal’
autoRequest
When true, automatically calls getUserMedia({ audio: true }) to acquire a microphone stream instead of requiring the consumer to set .stream.
maxSize
Maximum height/width of bars in pixels