# Manage media and devices (/en/realtime-media/interactive-live-streaming/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-8]

    Ensure that you have implemented the [SDK quickstart](../../index.mdx) in your project.

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

    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-1]

    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-7]

    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-8]

    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-8]

    * [`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-7]

    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-8]

    * [Custom audio source](custom-audio.mdx)
    * [Custom video source](custom-video.mdx)