# Manage media and devices (/en/realtime-media/video/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 [#understand-the-tech]

Agora Video 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 [#prerequisites]

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

## Implement volume control [#implement-volume-control]

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

    ### Adjust the capture volume of remote audio [#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 [#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 [#get-volume-information-of-users-5]

    The Video 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 [#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 [#api-reference-5]

    * [`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 [#sample-projects-5]

    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 [#see-also]

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