Enable short fadeout when stopping playback to prevent artifacts (#314)

Author: francamps

packages/embed-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humeai/voice-embed-react",
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0-beta.3",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

packages/embed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humeai/voice-embed",
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0-beta.3",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humeai/voice-react",
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0-beta.3",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

packages/react/src/lib/useSoundPlayer.ts

@@ -52,7 +52,7 @@ export const useSoundPlayer = (props: {
 
       await initAudioContext.audioWorklet
         .addModule(
-          'https://storage.googleapis.com/evi-react-sdk-assets/audio-worklet.js',
+          'https://storage.googleapis.com/evi-react-sdk-assets/audio-worklet-20250506.js',
         )
         .catch((e) => {
           console.log(e);
@@ -100,7 +100,6 @@ export const useSoundPlayer = (props: {
         await audioContext.current.decodeAudioData(arrayBuffer);
 
       const pcmData = audioBuffer.getChannelData(0);
-
       workletNode.current?.port.postMessage({ type: 'audio', data: pcmData });
 
       setIsPlaying(true);
@@ -122,6 +121,9 @@ export const useSoundPlayer = (props: {
       window.clearInterval(frequencyDataIntervalId.current);
     }
 
+    workletNode.current?.port.postMessage({ type: 'fadeAndClear' });
+    workletNode.current?.port.postMessage({ type: 'end' });
+
     if (analyserNode.current) {
       analyserNode.current.disconnect();
       analyserNode.current = null;
@@ -142,7 +144,6 @@ export const useSoundPlayer = (props: {
     }
 
     if (workletNode.current) {
-      workletNode.current.port.postMessage({ type: 'end' });
       workletNode.current.port.close();
       workletNode.current.disconnect();
       workletNode.current = null;
@@ -152,7 +153,10 @@ export const useSoundPlayer = (props: {
   }, []);
 
   const clearQueue = useCallback(() => {
-    workletNode.current?.port.postMessage({ type: 'clear' });
+    workletNode.current?.port.postMessage({
+      type: 'fadeAndClear',
+    });
+
     isProcessing.current = false;
     setIsPlaying(false);
     setFft(generateEmptyFft());

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

@@ -81,43 +81,85 @@ class AudioStreamProcessor extends AudioWorkletProcessor {
       switch (e.data?.type) {
         case 'audio':
           this._bq.push(new Float32Array(e.data.data));
+          if (this._fadeOutActive) {
+            this._fadeOutActive = false;
+            this._fadeOutCounter = 0;
+          }
           break;
         case 'end':
           this._shouldStop = true;
           break;
+        case 'fadeAndClear':
+          this._fadeOutActive = true;
+          this._fadeOutCounter = 0;
+          break;
         case 'clear':
           this._bq.clear();
           this._shouldStop = false;
           break;
       }
     };
     this._shouldStop = false;
+
+    this._fadeOutDurationMs = 30;
+    // sampleRate is part of AudioWorkletGlobalScope
+    // eslint-disable-next-line no-undef
+    this._sampleRate = sampleRate;
+    this._fadeOutSamplesCount = Math.floor(
+      (this._fadeOutDurationMs * this._sampleRate) / 1000,
+    );
+    this._fadeOutActive = false;
+    this._fadeOutCounter = 0;
   }
 
   process(inputs, outputs) {
     const output = outputs[0];
     const frames = output[0].length;
-    const chans = output.length;
+    const channels = output.length;
 
     const block = this._bq.read();
 
     if (block) {
-      for (let ch = 0; ch < chans; ch++) {
+      for (let ch = 0; ch < channels; ch++) {
         const out = output[ch];
         for (let i = 0; i < frames; i++) {
-          out[i] = block[i * chans + ch];
+          let sample = block[i * channels + ch] ?? 0;
+
+          // Apply fade out if active
+          if (this._fadeOutActive) {
+            const fadeProgress =
+              this._fadeOutCounter / this._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._fadeOutActive) {
+        this._fadeOutCounter += frames;
+
+        if (this._fadeOutCounter >= this._fadeOutSamplesCount) {
+          this._fadeOutActive = false;
+          this._fadeOutCounter = 0;
+          this._bq.clear();
+          this.port.postMessage({ type: 'ended' });
+        }
       }
+
+      return true;
+    }
+
+    if (this._shouldStop) {
+      this.port.postMessage({ type: 'ended' });
+      return false;
+    }
+
+    for (let ch = 0; ch < channels; ch++) {
+      output[ch].fill(0);
     }
 
     return true;