# Audio Volume Indicator

Build a sound/volume indicator from the participant's audio state exposed through `useCallStateHooks()`.

## Best Practices

- **Use participant state** - On React Native the audio level and speaking state come from the participant object (reported by the SFU), not from a local Web Audio analyser.
- **Provide visual feedback** - Give a clear indication of microphone activity.
- **Handle the muted case** - Only show activity when the participant is not muted.

## AudioVolumeIndicator component

Every participant exposes the following audio-related fields, derived from the SFU:

- `audioLevel` - a number between `0` (silence) and `1` (loud).
- `isSpeaking` - whether the participant is currently speaking.
- `isDominantSpeaker` - whether the participant is the dominant speaker in the call.

>
> **Note:** Unlike on the web, React Native does not provide the Web Audio API, so `createSoundDetector()` is not available. Use the participant's `audioLevel` / `isSpeaking` state instead. This state is populated while connected to a call.
>

The example below reads the local participant's `audioLevel` and renders a bar that grows with the volume:

```tsx
import { View } from "react-native";
import { useCallStateHooks } from "@stream-io/video-react-native-sdk";

export const AudioVolumeIndicator = () => {
  const { useLocalParticipant, useMicrophoneState } = useCallStateHooks();
  const localParticipant = useLocalParticipant();
  const { isMute } = useMicrophoneState();

  const audioLevel = localParticipant?.audioLevel ?? 0;
  const isSpeaking = !isMute && (localParticipant?.isSpeaking ?? false);

  return (
    <View
      style={{
        height: 8,
        minWidth: 8,
        borderRadius: 4,
        // scale the width with the current audio level (0 to 1)
        width: `${Math.round(audioLevel * 100)}%`,
        backgroundColor: isSpeaking ? "#005fff" : "#4c525c",
      }}
    />
  );
};
```

Map `audioLevel`, `isSpeaking`, and `isDominantSpeaker` to whatever visual you prefer — a bar, a set of dots, or an animated waveform.

---

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