> ## 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.

# Daily Audio

> The DailyAudio component manages audio for a Daily call in your React app.

`<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`](/reference/daily-react/daily-audio-track).

## Props (optional)

<ParamField body="autoSubscribeActiveSpeaker" type="boolean">
  When enabled and the call is configured to use manual [track subscriptions](/docs/guides/architecture-and-monitoring/intro-to-video-arch#track-subscriptions), `DailyAudio` automatically subscribes to any active speaker's audio track.
</ParamField>

<ParamField body="maxSpeakers" type="number" default="5">
  Defines the amount of participants that can be heard simultaneously.
</ParamField>

<ParamField body="onPlayFailed" type="Function">
  Callback when an `<audio>` tag fails to `play()`.
</ParamField>

<ParamField body="playLocalScreenAudio" type="boolean" default="false">
  When set to `true` the local participant's `screenAudio` will be played.
</ParamField>

<ParamField body="ref" type="Object">
  Grants access to a set of methods to query for `<audio>` elements rendered from `DailyAudio`.

  <Expandable title="ref methods">
    <ResponseField name="getAllAudio()" type="HTMLAudioElement[]">
      Returns all rendered `<audio>` elements.
    </ResponseField>

    <ResponseField name="getActiveSpeakerAudio()" type="HTMLAudioElement | null">
      Returns the `<audio>` element containing the audio track for the active speaker, or `null` in case there is no active speaker.
    </ResponseField>

    <ResponseField name="getScreenAudio()" type="HTMLAudioElement[]">
      Returns all `<audio>` elements with a `screenAudio` track assigned.
    </ResponseField>

    <ResponseField name="getAudioBySessionId(sessionId: string)" type="HTMLAudioElement | null">
      Returns the `<audio>` element for the given `sessionId` and an `audio` track assigned.
    </ResponseField>

    <ResponseField name="getScreenAudioBySessionId(sessionId: string)" type="HTMLAudioElement | null">
      Returns the `<audio>` element for the given `sessionId` and an `screenAudio` track assigned.
    </ResponseField>
  </Expandable>

  When passing a `ref` to `DailyAudio`, the passed ref receives access to methods to query for subsets of rendered `<audio>` elements via [`useImperativeHandle`](https://beta.reactjs.org/reference/react/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 `HTMLAudioElement`s rendered will allow you to adjust output volume levels.
</ParamField>

## Example

```jsx theme={null}
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

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

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