restore settimeout instead of polling

Author: francamps

packages/react/src/lib/useSoundPlayer.ts

@@ -5,7 +5,7 @@ import { convertLinearFrequenciesToBark } from './convertFrequencyScale';
 import { generateEmptyFft } from './generateEmptyFft';
 import type { AudioOutputMessage } from '../models/messages';
 
-const FADE_DURATION = 0.1;
+const FADE_DURATION = 0.05;
 const FADE_TARGET = 0.0001;
 
 export const useSoundPlayer = (props: {
@@ -125,25 +125,7 @@ export const useSoundPlayer = (props: {
     [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((type: 'end' | 'clear') => {
+  const fadeOutAndPostMessage = useCallback(async (type: 'end' | 'clear') => {
     if (!gainNode.current || !audioContext.current) {
       workletNode.current?.port.postMessage({ type });
       return;
@@ -158,12 +140,9 @@ export const useSoundPlayer = (props: {
       now + FADE_DURATION,
     );
 
-    isFadeCancelled.current = false;
-    //await waitForAudioTime(
-    //  now + FADE_DURATION,
-    //  audioContext.current,
-    //  () => isFadeCancelled.current,
-    //);
+    await new Promise((resolve) => {
+      setTimeout(resolve, FADE_DURATION * 1000);
+    });
 
     workletNode.current?.port.postMessage({ type });
 
@@ -179,7 +158,7 @@ export const useSoundPlayer = (props: {
     };
   }, []);
 
-  const stopAll = useCallback(() => {
+  const stopAll = useCallback(async () => {
     isInitialized.current = false;
     isProcessing.current = false;
     setIsPlaying(false);
@@ -190,7 +169,7 @@ export const useSoundPlayer = (props: {
       window.clearInterval(frequencyDataIntervalId.current);
     }
 
-    fadeOutAndPostMessage('end');
+    await fadeOutAndPostMessage('end');
 
     if (analyserNode.current) {
       analyserNode.current.disconnect();
@@ -220,8 +199,8 @@ export const useSoundPlayer = (props: {
     setFft(generateEmptyFft());
   }, [fadeOutAndPostMessage]);
 
-  const clearQueue = useCallback(() => {
-    fadeOutAndPostMessage('clear');
+  const clearQueue = useCallback(async () => {
+    await fadeOutAndPostMessage('clear');
     isProcessing.current = false;
     setIsPlaying(false);
     setFft(generateEmptyFft());