Skip to main content
useAudioLevelObserver(params) : void The onVolumeChange callback runs when the observed participant’s audio level changes, letting you respond to volume changes — for example, to drive a visual indicator.

​
Parameters

​
sessionId
string
required
The participant’s sessionId for which audio level should be observed.
​
onVolumeChange
Function
required
A callback reference to run when the track’s volume level changes.
​
onError
Function
A callback reference to run when local audio level observer is not available in the current browser.
​
interval
number
default:"200"
The interval in milliseconds at which the volume level is checked (minimum: 100).

​
Example

import {
  useAudioLevelObserver,
  useLocalSessionId,
} from '@daily-co/daily-react';
import { useCallback, useRef } from 'react';

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

  const volRef = useRef(null);

  useAudioLevelObserver(
    localSessionId,
    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

Components

Hooks