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>
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) => (<AudioTrackkey={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
.