# Manage media and devices (/en/realtime-media/rtc/build/control-audio-and-devices/volume-control-and-mute/javascript)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

This page shows you how to configure volume settings for audio recording, audio playback, and for the playback of music files.

## Understand the tech

Agora RTC SDK supports adjusting the audio volume for both recording and playback to meet practical application use-cases. For example, during a two-person call, you can mute a remote user by adjusting the playback volume setting to 0.

      
  
      
  
      
  
      
  
      
  
      
  
      
  
      
  
      
  
      
  
## Prerequisites

Ensure that you have implemented the [SDK quickstart](/en/realtime-media/rtc/get-started-sdk) in your project.

## Implement volume control

      
  
      
  
      
  
      
  
      
  
      
Use one or more of the following volume control methods to adjust volume settings.

### Adjust the capture volume of remote audio

To set the volume, mute, or unmute a remote user, call `setVolume` on the remote audio track:

```typescript
// Mute remote audio
const muteRemoteAudio = (audioTrack: IRemoteAudioTrack | null) => {
  if (!audioTrack) return;
  audioTrack.setVolume(0);
};

// Unmute remote audio
const unmuteRemoteAudio = (audioTrack: IRemoteAudioTrack | null) => {
  if (!audioTrack) return;
  audioTrack.setVolume(100);  // Set to a reasonable volume level
};
```

### Adjust the capture volume of local audio

To set the capture volume, mute, or unmute the local user, call `setVolume` on the local audio track:

```typescript
// Mute local audio
const muteLocalAudio = (audioTrack: IMicrophoneAudioTrack | null) => {
  if (!audioTrack) return;
  audioTrack.setVolume(0);
};

// Unmute local audio
const unmuteLocalAudio = (audioTrack: IMicrophoneAudioTrack | null) => {
  if (!audioTrack) return;
  audioTrack.setVolume(100);  // Set the volume to a reasonable volume level
};
```

The following example demonstrates how to mute and unmute local and remote users using `useLocalMicrophoneTrack` and `useRemoteUsers`.

```typescript
const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn);
const remoteUsers = useRemoteUsers();

return (
    <>
        <div>
            <button
                onClick={() => muteLocalAudio(localMicrophoneTrack)}
            >
                Mute local user
            </button>
            <button
                onClick={() => unmuteLocalAudio(localMicrophoneTrack)}
            >
                Unmute local user
            </button>
            <button
                onClick={() => muteRemoteAudio(remoteUsers[0].audioTrack || null)}
            >
                Mute remote user
            </button>
            <button
                onClick={() => unmuteRemoteAudio(remoteUsers[0].audioTrack || null)}
            >
                Unmute remote user
            </button>
        </div>
    </>
);
```

### Get volume information of users

The RTC SDK provides the ability to monitor the volume level of users using the `useVolumeLevel` hook. To get the audio volume level, pass the respective audio track (local or remote) to the hook:

```typescript
// Component to track and display the local user's audio volume level
const AudioVolumeTracker = ({ audioTrack }: { audioTrack?: IMicrophoneAudioTrack }) => {
  const volumeLevel = useVolumeLevel(audioTrack);

  return (
    <div>
      <label>Current Volume Level: {volumeLevel}</label>
    </div>
  );
};

// Component to track and display the remote user's audio volume level
const RemoteAudioVolumeTracker = ({ audioTrack }: { audioTrack?: IRemoteAudioTrack }) => {
  const volumeLevel = useVolumeLevel(audioTrack);

  return (
    <div>
      <label>Remote User's Volume Level: {volumeLevel}</label>
    </div>
  );
};
```

How to use:

```typescript
const { localMicrophoneTrack } = useLocalMicrophoneTrack();

// Display the volume level of the local user
<AudioVolumeTracker audioTrack={localMicrophoneTrack} />;

const remoteUsers = useRemoteUsers();

// Display the volume level of the first remote user
<RemoteAudioVolumeTracker audioTrack={remoteUsers[0]?.audioTrack} />;
```

    
  
      
  
      
  
      
  
      
  
      
  
      
  
## Reference

This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product.

      
  
      
  
      
  
      
  
      
  
      
### API reference

* [`IMicrophoneAudioTrack`](https://api-ref.agora.io/en/video-sdk/reactjs/2.x/interfaces/IMicrophoneAudioTrack.html)
* [`IRemoteAudioTrack`](https://api-ref.agora.io/en/video-sdk/reactjs/2.x/interfaces/IRemoteAudioTrack.html)
* [`setVolume`](https://api-ref.agora.io/en/video-sdk/reactjs/2.x/interfaces/IMicrophoneAudioTrack.html#setVolume.setVolume-1)
* [`useVolumeLevel`](https://api-ref.agora.io/en/video-sdk/reactjs/2.x/functions/useVolumeLevel.html)

### Sample projects

Agora offers the following open-source sample project for monitoring audio volume for your reference.

* GitHub: [useVolumeLevel](https://github.com/AgoraIO-Extensions/agora-rtc-react/blob/main/packages/agora-rtc-react/test/hook/useVolumeLevel.test.ts)

    
  
      
  
      
  
      
  
      
  
      
  
      
  
### See also

* [Custom audio source](/en/realtime-media/rtc/build/customize-audio-processing/custom-audio)
* [Custom video source](/en/realtime-media/rtc/build/capture-and-render-video/custom-video)