use worklet with fade

Author: francamps

.prettierrc.js

@@ -0,0 +1,21 @@
+/* eslint-env commonjs */
+module.exports = {
+  arrowParens: "always",
+  bracketSameLine: false,
+  bracketSpacing: true,
+  embeddedLanguageFormatting: "auto",
+  endOfLine: "lf",
+  htmlWhitespaceSensitivity: "css",
+  jsxSingleQuote: false,
+  printWidth: 80,
+  proseWrap: "preserve",
+  quoteProps: "as-needed",
+  rangeEnd: Infinity,
+  rangeStart: 0,
+  semi: true,
+  singleAttributePerLine: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: "all",
+  useTabs: false,
+};

examples/next-app/components/Voice.tsx

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

@@ -55,7 +55,8 @@ 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.js',
+          'https://storage.googleapis.com/franc-worklet-test/worklet.js',
         )
         .catch((e) => {
           console.log(e);
@@ -104,16 +105,17 @@ export const useSoundPlayer = (props: {
           await audioContext.current.decodeAudioData(arrayBuffer);
 
         const pcmData = audioBuffer.getChannelData(0);
+        workletNode.current?.port.postMessage({ type: 'audio', data: pcmData });
 
         if (gainNode.current) {
           const now = audioContext.current.currentTime;
           gainNode.current.gain.cancelScheduledValues(now);
-          const targetGain = isAudioMuted ? 0 : volume;
-          gainNode.current.gain.setValueAtTime(targetGain, now);
+          gainNode.current.gain.setValueAtTime(
+            volume,
+            audioContext.current.currentTime,
+          );
         }
 
-        workletNode.current?.port.postMessage({ type: 'audio', data: pcmData });
-
         setIsPlaying(true);
         onPlayAudio.current(message.id);
       } catch (e) {
@@ -131,24 +133,18 @@ export const useSoundPlayer = (props: {
     }
 
     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,
     );
-
-    await new Promise((resolve) => {
-      setTimeout(resolve, FADE_DURATION * 1000);
-    });
-
     workletNode.current?.port.postMessage({ type });
-
-    gainNode.current?.gain.setValueAtTime(
-      1.0,
-      audioContext.current?.currentTime || 0,
-    );
+    /*await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(null);
+      }, FADE_DURATION * 1000);
+    });*/
   }, []);
 
   const stopAll = useCallback(async () => {