set fade in worklet

Author: francamps

examples/next-app/components/Voice.tsx

@@ -9,15 +9,8 @@ import { ExampleComponent } from '@/components/ExampleComponent';
 export const Voice = ({ accessToken }: { accessToken: string }) => {
   return (
     <VoiceProvider
-      auth={{
-        type: 'apiKey',
-        value: 'JesgJYUNkFnqnEDzPSeGXjWMt3Zae2q7o7H1GBqn7A1AOJ2k',
-      }}
-      hostname={'test-api.hume.ai'}
-      queryParams={{
-        hume_uuid: 'a46eac19-af97-4658-b845-57120c695bef',
-      }}
-      configId={'889cff21-cfaf-4269-8e90-b5b9a5f7f92e'}
+      auth={{ type: 'accessToken', value: accessToken }}
+      hostname={process.env.NEXT_PUBLIC_HUME_VOICE_HOSTNAME || 'api.hume.ai'}
       messageHistoryLimit={10}
       onMessage={(message) => {
         // eslint-disable-next-line no-console
@@ -125,6 +118,7 @@ export const Voice = ({ accessToken }: { accessToken: string }) => {
           });
         }
       }, [])}
+      configId={process.env.NEXT_PUBLIC_HUME_VOICE_WEATHER_CONFIG_ID}
       onClose={(event) => {
         const niceClosure = 1000;
         const code = event.code;

packages/react/src/lib/VoiceProvider.tsx

@@ -232,7 +232,9 @@ export const VoiceProvider: FC<VoiceProviderProps> = ({
           if (player.isPlaying) {
             onInterruption.current(message);
           }
-          player.clearQueue();
+          player.clearQueue({
+            fadeOut: message.type === 'user_interruption',
+          });
         }
 
         if (

packages/react/src/lib/useSoundPlayer.ts

@@ -5,9 +5,6 @@ import { convertLinearFrequenciesToBark } from './convertFrequencyScale';
 import { generateEmptyFft } from './generateEmptyFft';
 import type { AudioOutputMessage } from '../models/messages';
 
-const FADE_DURATION = 0.05;
-const FADE_TARGET = 0.0001;
-
 export const useSoundPlayer = (props: {
   onError: (message: string) => void;
   onPlayAudio: (id: string) => void;
@@ -111,7 +108,7 @@ export const useSoundPlayer = (props: {
           const now = audioContext.current.currentTime;
           gainNode.current.gain.cancelScheduledValues(now);
           gainNode.current.gain.setValueAtTime(
-            volume,
+            isAudioMuted ? 0 : volume,
             audioContext.current.currentTime,
           );
         }
@@ -126,28 +123,7 @@ export const useSoundPlayer = (props: {
     [isAudioMuted, volume],
   );
 
-  const fadeOutAndPostMessage = useCallback(async (type: 'end' | 'clear') => {
-    if (!gainNode.current || !audioContext.current) {
-      workletNode.current?.port.postMessage({ type });
-      return;
-    }
-
-    const now = audioContext.current.currentTime;
-    gainNode.current.gain.cancelScheduledValues(now);
-    gainNode.current.gain.setValueAtTime(gainNode.current.gain.value, now);
-    gainNode.current.gain.exponentialRampToValueAtTime(
-      FADE_TARGET,
-      now + FADE_DURATION,
-    );
-    workletNode.current?.port.postMessage({ type });
-    /*await new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(null);
-      }, FADE_DURATION * 1000);
-    });*/
-  }, []);
-
-  const stopAll = useCallback(async () => {
+  const stopAll = useCallback(() => {
     isInitialized.current = false;
     isProcessing.current = false;
     setIsPlaying(false);
@@ -158,7 +134,8 @@ export const useSoundPlayer = (props: {
       window.clearInterval(frequencyDataIntervalId.current);
     }
 
-    await fadeOutAndPostMessage('end');
+    workletNode.current?.port.postMessage({ type: 'fade' });
+    workletNode.current?.port.postMessage({ type: 'end' });
 
     if (analyserNode.current) {
       analyserNode.current.disconnect();
@@ -186,14 +163,23 @@ export const useSoundPlayer = (props: {
     }
 
     setFft(generateEmptyFft());
-  }, [fadeOutAndPostMessage]);
+  }, []);
 
-  const clearQueue = useCallback(async () => {
-    await fadeOutAndPostMessage('clear');
-    isProcessing.current = false;
-    setIsPlaying(false);
-    setFft(generateEmptyFft());
-  }, [fadeOutAndPostMessage]);
+  const clearQueue = useCallback(
+    ({
+      fadeOut,
+    }: {
+      fadeOut?: boolean;
+    } = {}) => {
+      if (fadeOut) workletNode.current?.port.postMessage({ type: 'fade' });
+      workletNode.current?.port.postMessage({ type: 'clear' });
+
+      isProcessing.current = false;
+      setIsPlaying(false);
+      setFft(generateEmptyFft());
+    },
+    [],
+  );
 
   const setVolume = useCallback(
     (newLevel: number) => {

packages/react/src/worklets/audio-worklet.js

@@ -3,6 +3,15 @@ class BufferQueue {
     this._length = 0;
     this._buffers = [];
     this._hasPushed = false;
+
+    // For fading out
+    this._fadeOutDurationMs = 100;
+    this._sampleRate = sampleRate;
+    this._fadeOutSamplesCount = Math.floor(
+      (this._fadeOutDurationMs * this._sampleRate) / 1000,
+    );
+    this._fadeOutActive = false;
+    this._fadeOutCounter = 0;
   }
 
   push(buffer) {
@@ -85,8 +94,11 @@ class AudioStreamProcessor extends AudioWorkletProcessor {
         case 'end':
           this._shouldStop = true;
           break;
+        case 'fade':
+          this._bq._fadeOutActive = true;
+          this._bq._fadeOutCounter = 0;
+          break;
         case 'clear':
-          this._bq.clear();
           this._shouldStop = false;
           break;
       }
@@ -105,19 +117,44 @@ class AudioStreamProcessor extends AudioWorkletProcessor {
       for (let ch = 0; ch < chans; ch++) {
         const out = output[ch];
         for (let i = 0; i < frames; i++) {
-          out[i] = block[i * chans + ch];
+          let sample = block[i * chans + ch] ?? 0;
+
+          // Apply automatic fade-out if active
+          if (this._bq._fadeOutActive) {
+            const fadeProgress =
+              this._bq._fadeOutCounter / this._bq._fadeOutSamplesCount;
+            const gain = 1 - Math.min(fadeProgress, 1);
+            sample *= gain;
+          }
+
+          out[i] = sample;
         }
       }
-    } else {
-      if (this._shouldStop) {
-        // Stop worklet once we've finished playback
-        this.port.postMessage({ type: 'ended' });
-        return false;
-      }
 
-      for (let ch = 0; ch < chans; ch++) {
-        output[ch].fill(0);
+      // If we're currently fading out, increment the counter and end if complete
+      if (this._bq._fadeOutActive) {
+        this._bq._fadeOutCounter += frames;
+
+        if (this._bq._fadeOutCounter >= this._bq._fadeOutSamplesCount) {
+          this._bq._fadeOutActive = false;
+          this._bq._fadeOutCounter = 0;
+          this._bq.clear();
+          this.port.postMessage({ type: 'ended' });
+        }
       }
+
+      return true;
+    }
+
+    if (this._shouldStop) {
+      // Stop worklet once we've finished playback
+      this.port.postMessage({ type: 'ended' });
+      return false;
+    }
+
+    // Fill output with silence during fade-out or between clips
+    for (let ch = 0; ch < chans; ch++) {
+      output[ch].fill(0);
     }
 
     return true;