Audio rendering with React Components

Different ways to render audio with React Components

There are two primary methods for rendering (making audio tracks audible) audio with React Components, each offering distinct benefits and suited for different use cases.

Render all audio tracks within the room

The RoomAudioRenderer component simplifies audio management in LiveKit Rooms by rendering all audio tracks together. It's a straightforward and often optimal solution. Just import RoomAudioRenderer and place it in your LiveKitRoom component for seamless audio integration.

<LiveKitRoom audio={true} video={true} token={token}>
<RoomAudioRenderer />
</LiveKitRoom>
tip

Utilizing the RoomAudioRenderer ensures automatic benefits from future server side performance enhancements without requiring any modifications to your existing code.

Full control and ownership of the audio rendering process

For complete control over individual audio Tracks, including muting and volume adjustments at the track level, you can craft a custom audio renderer using the useTracks hook alongside the <AudioTrack/> component. For example, this level of control can be used to create spatial audio applications where you may want to adjust each audio track based on the distance between participants.

const tracks = useTracks([
Track.Source.Microphone,
Track.Source.ScreenShareAudio,
Track.Source.Unknown,
]).filter((ref) => !isLocal(ref.participant) && ref.publication.kind === Track.Kind.Audio);
return (
<div style={{ display: 'none' }}>
{tracks.map((trackRef) => (
<AudioTrack
key={getTrackReferenceId(trackRef)}
trackRef={trackRef}
volume={volume}
muted={muted}
/>
))}
</div>
);

Depending on your application it is possible that audio tracks have an unknown source. To render these as well, we include the Track.Source.Unknown in the array of sources passed to the useTracks hook, but then filter out the tracks that are not of kind Audio.