Use requestanimation loop to poll time

Author: francamps

packages/react/src/lib/useSoundPlayer.ts

@@ -1,17 +1,21 @@
 import { convertBase64ToBlob } from 'hume';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { convertLinearFrequenciesToBark } from './convertFrequencyScale';
 import { generateEmptyFft } from './generateEmptyFft';
 import type { AudioOutputMessage } from '../models/messages';
 
+const FADE_DURATION = 0.1;
+const FADE_TARGET = 0.0001;
+
 export const useSoundPlayer = (props: {
   onError: (message: string) => void;
   onPlayAudio: (id: string) => void;
   onStopAudio: (id: string) => void;
 }) => {
   const [isPlaying, setIsPlaying] = useState(false);
   const [isAudioMuted, setIsAudioMuted] = useState(false);
+  const isFadeCancelled = useRef(false);
   const [volume, setVolumeState] = useState<number>(1.0);
   const [fft, setFft] = useState<number[]>(generateEmptyFft());
 
@@ -87,46 +91,65 @@ export const useSoundPlayer = (props: {
     }
   }, []);
 
-  const addToQueue = useCallback(async (message: AudioOutputMessage) => {
-    if (!isInitialized.current || !audioContext.current) {
-      onError.current('Audio player has not been initialized');
-      return;
-    }
-
-    try {
-      const blob = convertBase64ToBlob(message.data);
-      const arrayBuffer = await blob.arrayBuffer();
-      const audioBuffer =
-        await audioContext.current.decodeAudioData(arrayBuffer);
-
-      const pcmData = audioBuffer.getChannelData(0);
-
-      if (gainNode.current) {
-        const now = audioContext.current.currentTime;
-        gainNode.current.gain.cancelScheduledValues(now);
-        const targetGain = isAudioMuted ? 0 : volume;
-        gainNode.current.gain.setValueAtTime(targetGain, now);
+  const addToQueue = useCallback(
+    async (message: AudioOutputMessage) => {
+      if (!isInitialized.current || !audioContext.current) {
+        onError.current('Audio player has not been initialized');
+        return;
       }
 
-      workletNode.current?.port.postMessage({ type: 'audio', data: pcmData });
+      try {
+        const blob = convertBase64ToBlob(message.data);
+        const arrayBuffer = await blob.arrayBuffer();
+        const audioBuffer =
+          await audioContext.current.decodeAudioData(arrayBuffer);
 
-      setIsPlaying(true);
-      onPlayAudio.current(message.id);
-    } catch (e) {
-      const eMessage = e instanceof Error ? e.message : 'Unknown error';
-      onError.current(`Failed to add clip to queue: ${eMessage}`);
-    }
-  }, []);
+        const pcmData = audioBuffer.getChannelData(0);
+
+        if (gainNode.current) {
+          const now = audioContext.current.currentTime;
+          gainNode.current.gain.cancelScheduledValues(now);
+          const targetGain = isAudioMuted ? 0 : volume;
+          gainNode.current.gain.setValueAtTime(targetGain, now);
+        }
+
+        workletNode.current?.port.postMessage({ type: 'audio', data: pcmData });
 
-  const fadeOutAndPostStopMessage = async (type: 'end' | 'clear') => {
-    const FADE_DURATION = 0.1;
+        setIsPlaying(true);
+        onPlayAudio.current(message.id);
+      } catch (e) {
+        const eMessage = e instanceof Error ? e.message : 'Unknown error';
+        onError.current(`Failed to add clip to queue: ${eMessage}`);
+      }
+    },
+    [isAudioMuted, volume],
+  );
+
+  const waitForAudioTime = (
+    targetTime: number,
+    ctx: AudioContext,
+    isCancelled: () => boolean,
+  ): Promise<void> =>
+    new Promise((resolve) => {
+      const check = () => {
+        if (isCancelled()) return;
+
+        if (ctx.currentTime >= targetTime) {
+          resolve();
+        } else {
+          requestAnimationFrame(check);
+        }
+      };
+      check();
+    });
+
+  const fadeOutAndPostMessage = useCallback(async (type: 'end' | 'clear') => {
     if (!gainNode.current || !audioContext.current) {
       workletNode.current?.port.postMessage({ type });
       return;
     }
 
     const now = audioContext.current.currentTime;
-    const FADE_TARGET = 0.0001;
 
     gainNode.current.gain.cancelScheduledValues(now);
     gainNode.current.gain.setValueAtTime(gainNode.current.gain.value, now);
@@ -135,12 +158,26 @@ export const useSoundPlayer = (props: {
       now + FADE_DURATION,
     );
 
-    await new Promise((resolve) => setTimeout(resolve, FADE_DURATION * 1000));
+    isFadeCancelled.current = false;
+    await waitForAudioTime(
+      now + FADE_DURATION,
+      audioContext.current,
+      () => isFadeCancelled.current,
+    );
 
     workletNode.current?.port.postMessage({ type });
 
-    gainNode.current.gain.setValueAtTime(1.0, audioContext.current.currentTime);
-  };
+    gainNode.current?.gain.setValueAtTime(
+      1.0,
+      audioContext.current?.currentTime || 0,
+    );
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      isFadeCancelled.current = true;
+    };
+  }, []);
 
   const stopAll = useCallback(async () => {
     isInitialized.current = false;
@@ -153,7 +190,7 @@ export const useSoundPlayer = (props: {
       window.clearInterval(frequencyDataIntervalId.current);
     }
 
-    await fadeOutAndPostStopMessage('end');
+    await fadeOutAndPostMessage('end');
 
     if (analyserNode.current) {
       analyserNode.current.disconnect();
@@ -181,14 +218,14 @@ export const useSoundPlayer = (props: {
     }
 
     setFft(generateEmptyFft());
-  }, []);
+  }, [fadeOutAndPostMessage]);
 
   const clearQueue = useCallback(() => {
-    void fadeOutAndPostStopMessage('clear');
+    void fadeOutAndPostMessage('clear');
     isProcessing.current = false;
     setIsPlaying(false);
     setFft(generateEmptyFft());
-  }, []);
+  }, [fadeOutAndPostMessage]);
 
   const setVolume = useCallback(
     (newLevel: number) => {