# Audio Volume Indicator

This guide shows how to build a custom sound detection component with `useMicrophoneState()` and `createSoundDetector()`.

## AudioVolumeIndicator component

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

![Image of audio volume indicator](@video/react/_assets/ui-cookbook/audio-volume-indicator/audio-volume-indicator.png)

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.

```tsx {51,52}
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>
  );
};
```


---

This page was last updated at 2026-04-22T14:09:56.236Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/ui-cookbook/audio-volume-indicator/](https://getstream.io/video/docs/react/ui-cookbook/audio-volume-indicator/).