> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# useAudioLevel

> useAudioLevel is deprecated.

<Badge color="yellow">Deprecated 0.20.0</Badge>

`useAudioLevel(params) : void`

<Warning>
  `useAudioLevel` is deprecated. Use [`useAudioLevelObserver`](/reference/daily-react/use-audio-level-observer) instead.
</Warning>

The`useAudioLevel` hook takes a`MediaStreamTrack` (for example, a call participant's audio track). The second parameter, `onVolumeChange`, is a callback function,
which runs when the track's volume level changes. With this callback, you can respond to the track's volume changes in whichever way you want.

## Parameters

<ParamField body="mediaTrack" type="MediaStreamTrack" required>
  The `MediaStreamTrack` to test.
</ParamField>

<ParamField body="onVolumeChange" type="Function" required>
  A callback reference to run when the track's volume level changes.
</ParamField>

## Example

```jsx theme={null}
import {
  useAudioLevel,
  useAudioTrack,
  useLocalSessionId,
} from '@daily-co/daily-react';
import { useCallback, useRef } from 'react';

export const MicVolumeVisualizer = () => {
  const localSessionId = useLocalSessionId();
  const audioTrack = useAudioTrack(localSessionId);

  const volRef = useRef(null);

  useAudioLevel(
    audioTrack?.persistentTrack,
    useCallback((volume) => {
      // this volume number will be between 0 and 1
      // give it a minimum scale of 0.15 to not completely disappear 👻
      volRef.current.style.transform = `scale(${Math.max(0.15, volume)})`;
    }, [])
  );

  // Your audio track's audio volume visualized in a small circle,
  // whose size changes depending on the volume level
  return (
    <div>
      <div className="vol" ref={volRef} />
      <style jsx>{`
        .vol {
          border: 1px solid black;
          border-radius: 100%;
          height: 32px;
          transition: transform 0.1s ease;
          width: 32px;
        }
      `}</style>
    </div>
  );
};
```

## See also

<CardGroup>
  <Card title="Hooks" icon="code" iconType="solid">
    * [useAudioLevelObserver()](/reference/daily-react/use-audio-level-observer) (replacement)
    * [useMediaTrack()](/reference/daily-react/use-media-track)
  </Card>

  <Card title="Components" icon="layout" iconType="solid">
    * [DailyAudioTrack](/reference/daily-react/daily-audio-track)
    * [DailyAudio](/reference/daily-react/daily-audio)
  </Card>
</CardGroup>