Hiyve Components - v1.0.0
    Preparing search index...

    Function AudioLevelMonitor

    • AudioLevelMonitor provides real-time visualization of audio input levels.

      Parameters

      Returns ReactElement

      The rendered AudioLevelMonitor component

      The AudioLevelMonitor component visualizes audio from a MediaStream using the Web Audio API's AnalyserNode. It supports multiple visualization modes and is fully customizable.

      Visualization Modes:

      • bars: Frequency bars (default) - shows audio frequency distribution
      • waveform: Oscilloscope-style display - shows audio waveform over time
      • meter: Simple level meter - shows average audio level

      Key Features:

      • Peak indicator: Shows highest recent audio level (with decay)
      • Color thresholds: Colors change based on audio level
      • Orientation: Horizontal or vertical display
      • Full customization: Colors, styles, and analysis parameters

      Audio Analysis: The component uses fftSize and smoothingTimeConstant to control frequency analysis. Higher FFT sizes provide more detail but use more CPU.

      Basic usage with bars mode:

      import { AudioLevelMonitor } from '@hiyve/react-ui';

      function MicrophoneLevel({ audioStream }: { audioStream: MediaStream }) {
        return (
          <AudioLevelMonitor
            stream={audioStream}
            mode="bars"
            barCount={20}
            width={300}
            height={50}
          />
        );
      }

      Meter mode with custom colors:

      import { AudioLevelMonitor } from '@hiyve/react-ui';

      function SimpleMeter({ stream }: { stream: MediaStream }) {
        return (
          <AudioLevelMonitor
            stream={stream}
            mode="meter"
            showPeak
            colors={{
              low: '#22c55e',
              medium: '#eab308',
              high: '#ef4444',
              meterBackground: '#27272a',
            }}
            styles={{
              mediumThreshold: 0.5,
              highThreshold: 0.8,
            }}
          />
        );
      }

      Waveform mode in vertical orientation:

      import { AudioLevelMonitor } from '@hiyve/react-ui';

      function VerticalWaveform({ stream }: { stream: MediaStream }) {
        return (
          <AudioLevelMonitor
            stream={stream}
            mode="waveform"
            orientation="vertical"
            width={60}
            height={200}
            colors={{ low: '#3b82f6' }}
          />
        );
      }

      Responsive audio monitor:

      import { AudioLevelMonitor } from '@hiyve/react-ui';

      function ResponsiveMonitor({ stream }: { stream: MediaStream }) {
        return (
          <AudioLevelMonitor
            stream={stream}
            width="100%"
            height={40}
            sx={{ borderRadius: 2 }}
          />
        );
      }

    Settings

    Member Visibility