Skip to main content
<DailyAudio /> With default settings it will play any remote audio and screenAudio tracks, while maintaining up to 5 speaker slots. In case one of the <audio> tags fails to play, DailyAudio will call onPlayFailed with detailed information and a reference to the <audio> tag for which the play() failed. DailyAudio is meant to be a plug-and-play solution to audio for React apps integrating Daily. If you need a custom audio composition head over to DailyAudioTrack.

​
Props (optional)

​
autoSubscribeActiveSpeaker
boolean
When enabled and the call is configured to use manual track subscriptions, DailyAudio automatically subscribes to any active speaker’s audio track.
​
maxSpeakers
number
default:"5"
Defines the amount of participants that can be heard simultaneously.
​
onPlayFailed
Function
Callback when an <audio> tag fails to play().
​
playLocalScreenAudio
boolean
default:"false"
When set to true the local participant’s screenAudio will be played.
​
ref
Object
Grants access to a set of methods to query for <audio> elements rendered from DailyAudio.When passing a ref to DailyAudio, the passed ref receives access to methods to query for subsets of rendered <audio> elements via useImperativeHandle. Use these methods to query for <audio> elements rendered from DailyAudio in order to get DOM-level access. As an example, having direct access to the HTMLAudioElements rendered will allow you to adjust output volume levels.

​
Example

import { DailyAudio } from '@daily-co/daily-react';

function CallComponent() {
  const handlePlayFailed = useCallback((e) => {
    console.error(
      `Failed to play ${e.type} for ${e.sessionId}. Audio tag: ${e.target}.`
    );
  }, []);
  return <DailyAudio maxSpeakers={6} onPlayFailed={handlePlayFailed} />;
}

​
See also

Components

Hooks