Audio rendering 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.

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>

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.