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)

ParameterTypeDescription
maxSpeakersnumberDefines the amount of participants that can be heard simultaneously. Defaults to 5
onPlayFailedFunctionCallback when an <audio> tag fails to play()
playLocalScreenAudiobooleanWhen set to true the local participant's screenAudio will be played. Defaults to false
refObjectGrants 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.

MethodReturnTypeDescription
getAllAudio()HTMLAudioElement[]Returns all rendered <audio> elements
getActiveSpeakerAudio()HTMLAudioElement | nullReturns 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 | nullReturns the <audio> element for the given sessionId and an audio track assigned
getScreenAudioBySessionId(sessionId: string)HTMLAudioElement | nullReturns the <audio> element for the given sessionId and an screenAudio track assigned

Sample code