Automatically attempt to resume suspended audio contexts on click (#1431)

Author: lukasIO

.changeset/bright-dots-crash.md

@@ -0,0 +1,5 @@
+---
+"livekit-client": patch
+---
+
+Automatically attempt to resume suspended audio contexts on click

src/room/track/utils.ts

@@ -133,7 +133,21 @@ export function getNewAudioContext(): AudioContext | void {
     // @ts-ignore
     typeof window !== 'undefined' && (window.AudioContext || window.webkitAudioContext);
   if (AudioContext) {
-    return new AudioContext({ latencyHint: 'interactive' });
+    const audioContext = new AudioContext({ latencyHint: 'interactive' });
+    // If the audio context is suspended, we need to resume it when the user clicks on the page
+    if (
+      audioContext.state === 'suspended' &&
+      typeof window !== 'undefined' &&
+      window.document?.body
+    ) {
+      const handleResume = () => {
+        audioContext.resume().then(() => {
+          window.document.body?.removeEventListener('click', handleResume);
+        });
+      };
+      window.document.body.addEventListener('click', handleResume);
+    }
+    return audioContext;
   }
 }
 

src/room/utils.ts

@@ -433,6 +433,7 @@ export function createAudioAnalyser(
   if (!audioContext) {
     throw new Error('Audio Context not supported on this browser');
   }
+
   const streamTrack = opts.cloneTrack ? track.mediaStreamTrack.clone() : track.mediaStreamTrack;
   const mediaStreamSource = audioContext.createMediaStreamSource(new MediaStream([streamTrack]));
   const analyser = audioContext.createAnalyser();