DailyAudio
<DailyAudio />
The DailyAudio component manages audio for a Daily call in your React app.
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)
| Parameter | Type | Description |
|---|---|---|
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 | Defines the amount of participants that can be heard simultaneously. Defaults to 5 |
onPlayFailed | Function | Callback when an <audio> tag fails to play() |
playLocalScreenAudio | boolean | When set to true the local participant's screenAudio will be played. Defaults to false |
ref | Object | Grants access to a set of methods to query for <audio> elements rendered from DailyAudio |
Querying for <audio> elements
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.
| Method | ReturnType | Description |
|---|---|---|
getAllAudio() | HTMLAudioElement[] | Returns all rendered <audio> elements |
getActiveSpeakerAudio() | HTMLAudioElement | null | Returns the <audio> element containing the audio track for the active speaker, or null in case there is no active speaker |
getScreenAudio() | HTMLAudioElement[] | Returns all <audio> elements with a screenAudio track assigned |
getAudioBySessionId(sessionId: string) | HTMLAudioElement | null | Returns the <audio> element for the given sessionId and an audio track assigned |
getScreenAudioBySessionId(sessionId: string) | HTMLAudioElement | null | Returns the <audio> element for the given sessionId and an screenAudio track assigned |