Audio Volume Indicator

In this documentation article, we will explore how to build a custom sound detection component by using useMicrophoneState() and our createSoundDetector() helper.

AudioVolumeIndicator component

The component will show the audio level changes by expanding and contracting a line.

The audio level is kept in component's state. The sound detection is set up in an effect. Also, we make sure to call the clean-up function in the effect clean-up phase.

import { useEffect, useState } from 'react';

import {
  createSoundDetector,
  Icon,
  useCallStateHooks,
} from '@stream-io/video-react-sdk';

export const AudioVolumeIndicator = () => {
  const { useMicrophoneState } = useCallStateHooks();
  const { isEnabled, mediaStream } = useMicrophoneState();
  const [audioLevel, setAudioLevel] = useState(0);

  useEffect(() => {
    if (!isEnabled || !mediaStream) return;

    const disposeSoundDetector = createSoundDetector(
      mediaStream,
      ({ audioLevel: al }) => setAudioLevel(al),
      { detectionFrequencyInMs: 80, destroyStreamOnStop: false },
    );

    return () => {
      disposeSoundDetector().catch(console.error);
    };
  }, [isEnabled, mediaStream]);

  if (!isEnabled) return null;

  return (
    <div
      style={{
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        gap: '0.75rem',
        padding: '0 1.25rem 1rem',
      }}
    >
      <Icon icon="mic" />
      <div
        style={{
          flex: '1',
          background: '#fff',
          height: '5px',
          borderRadius: '4px',
        }}
      >
        <div
          style={{
            transform: `scaleX(${audioLevel / 100})`,
            transformOrigin: 'left center',
            background: 'var(--str-video__primary-color)',
            width: '100%',
            height: '100%',
          }}
        />
      </div>
    </div>
  );
};