add isMuted props to RoomAudioRenderer and AudioTrack

livekit · Sep 28, 2023 · 47a2660 · 47a2660
1 parent 2b77ee5
commit 47a2660
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/packages/react/src/components/RoomAudioRenderer.tsx b/packages/react/src/components/RoomAudioRenderer.tsx
@@ -8,6 +8,8 @@ import { AudioTrack } from './participant/AudioTrack';
 export interface RoomAudioRendererProps {
   /** Sets the volume for all audio tracks rendered by this component. By default, the range is between `0.0` and `1.0`. */
   volume?: number;
+  /** If set to true, mutes all audio tracks rendered by the component. */
+  isMuted?: boolean;
 }
 
 /**
@@ -22,7 +24,7 @@ export interface RoomAudioRendererProps {
  * ```
  * @public
  */
-export function RoomAudioRenderer({ volume }: RoomAudioRendererProps) {
+export function RoomAudioRenderer({ volume, isMuted }: RoomAudioRendererProps) {
   const tracks = useTracks(
     [Track.Source.Microphone, Track.Source.ScreenShareAudio, Track.Source.Unknown],
     {
@@ -40,7 +42,12 @@ export function RoomAudioRenderer({ volume }: RoomAudioRendererProps) {
   return (
     <div style={{ display: 'none' }}>
       {tracks.map((trackRef) => (
-        <AudioTrack key={getTrackReferenceId(trackRef)} trackRef={trackRef} volume={volume} />
+        <AudioTrack
+          key={getTrackReferenceId(trackRef)}
+          trackRef={trackRef}
+          volume={volume}
+          isMuted={isMuted}
+        />
       ))}
     </div>
   );

diff --git a/packages/react/src/components/participant/AudioTrack.tsx b/packages/react/src/components/participant/AudioTrack.tsx
@@ -22,6 +22,14 @@ export interface AudioTrackProps<T extends HTMLMediaElement = HTMLMediaElement>
   onSubscriptionStatusChanged?: (subscribed: boolean) => void;
   /** Sets the volume of the audio track. By default, the range is between `0.0` and `1.0`. */
   volume?: number;
+  /**
+   * Mutes the audio track if set to `true`.
+   * @remarks
+   * Does not currently support the Web Audio API.
+   * A workaround is to set the volume to `0` instead.
+   * @alpha
+   */
+  isMuted?: boolean;
 }
 
 /**
@@ -42,6 +50,7 @@ export function AudioTrack({
   trackRef,
   onSubscriptionStatusChanged,
   volume,
+  isMuted,
   source,
   name,
   publication,
@@ -84,5 +93,5 @@ export function AudioTrack({
     }
   }, [volume, track]);
 
-  return <audio ref={mediaEl} {...elementProps} />;
+  return <audio ref={mediaEl} muted={isMuted} {...elementProps} />;
 }