mt fix on audio recorderw

fy-to · May 3, 2024 · bc81df8 · bc81df8
1 parent 8c9b571
commit bc81df8
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 41 deletions.
diff --git a/packages/klb-vue/src/composables/audioRecorder.ts b/packages/klb-vue/src/composables/audioRecorder.ts
@@ -7,13 +7,13 @@ export function useAudioRecorder(
 ) {
   const audioContext = ref<AudioContext | null>(null);
   const mediaRecorder = ref<MediaRecorder | null>(null);
-  const audioChunks = ref<Blob[]>([]);
   const analyser = ref<AnalyserNode | null>(null);
   const recording = ref(false);
   const silenceStart = ref(performance.now());
   const isSilent = ref(false);
   const hasAudioBeenRecorded = ref(false);
   const shouldCallOnAudioAvailable = ref(false);
+  console.log("init object");
 
   const isRecording = () => {
     return mediaRecorder.value && mediaRecorder.value.state === "recording";
@@ -51,7 +51,7 @@ export function useAudioRecorder(
 
             if (!shouldCallOnAudioAvailable.value) {
               shouldCallOnAudioAvailable.value = true;
-              mediaRecorder.value?.requestData();
+              mediaRecorder.value?.stop(); // stop() will trigger the dataavailable
             }
           }
         }
@@ -72,7 +72,6 @@ export function useAudioRecorder(
     // Init everything
 
     recording.value = false;
-    audioChunks.value = [];
     hasAudioBeenRecorded.value = false;
     isSilent.value = false;
     silenceStart.value = performance.now();
@@ -91,32 +90,20 @@ export function useAudioRecorder(
 
     mediaRecorder.value.addEventListener("dataavailable", (event) => {
       if (event.data.size > 0) {
-        if (shouldCallOnAudioAvailable.value) {
-          // add the last chunk
-          audioChunks.value.push(event.data);
-          onAudioAvailableCallback(
-            audioChunks.value.length > 1
-              ? new Blob(audioChunks.value)
-              : audioChunks.value[0],
-          );
-          stopRecording();
-          audioChunks.value = [];
-          shouldCallOnAudioAvailable.value = false;
-          silenceStart.value = performance.now();
-        } else {
-          audioChunks.value.push(event.data);
-        }
+        onAudioAvailableCallback(event.data);
+        stopRecording();
+        shouldCallOnAudioAvailable.value = false;
+        silenceStart.value = performance.now();
       }
     });
 
-    mediaRecorder.value.start(200);
+    mediaRecorder.value.start();
     recording.value = true;
 
     processAudioStream();
   };
   const stopRecording = async () => {
     recording.value = false;
-    audioChunks.value = [];
     hasAudioBeenRecorded.value = false;
     isSilent.value = false;
     silenceStart.value = performance.now();
@@ -142,7 +129,6 @@ export function useAudioRecorder(
       analyser.value = null;
     }
     recording.value = false;
-    audioChunks.value = [];
   };
 
   const resumeRecording = () => {

diff --git a/packages/klb-vue/src/composables/klbAgent.ts b/packages/klb-vue/src/composables/klbAgent.ts
@@ -34,10 +34,6 @@ export function useKlbAgent() {
       session.value = r.data.HIAgent_Session__;
       videoIdleURL.value = r.data.Idle_Url;
       bgImage.value = r.data.Background;
-      if (idleVideoElement.value) {
-        idleVideoElement.value.muted = true;
-        idleVideoElement.value.loop = true;
-      }
       setTimeout(() => {
         playIdleVideo();
       }, 1000);
@@ -47,32 +43,35 @@ export function useKlbAgent() {
       eventBus.emit("main-loading", false);
     }
   };
-  const onAudioAvailableCallback = (chunks: Blob) => {
+  const onAudioAvailableCallback = (blob: Blob) => {
     const filename = `audio_${Date.now()}.webm`; // Example filename with timestamp
-    const file = new File([chunks], filename, { type: "audio/webm" });
+    const file = new File([blob], filename, { type: "audio/webm" });
     upload.append(`HIAgent/Session/${session.value}:input`, file);
     upload.run();
   };
   const playIdleVideo = () => {
-    if (videoElement.value) {
-      videoElement.value.classList.add("hidden");
-    }
+    if (!videoElement.value) return;
+    videoElement.value.classList.add("hidden");
     if (!audioRecorder.isRecording()) {
       audioRecorder.startRecording();
     }
-    if (idleVideoElement.value) {
-      idleVideoElement.value.muted = true;
-      idleVideoElement.value.loop = true;
-      if (idleVideoElement.value.src !== videoIdleURL.value) {
-        idleVideoElement.value.src = videoIdleURL.value;
-      }
+    if (!idleVideoElement.value) return;
 
-      idleVideoElement.value.play().catch((e) => {
-        console.error("Failed to play idle video", e);
-      });
-    } else {
-      console.error("idle video element not found");
+    // @ts-ignore
+    if (idleVideoElement.value.src === videoIdleURL.value) {
+      if (idleVideoElement.value.paused) {
+        idleVideoElement.value.play().catch((e) => {
+          console.error("Failed to play idle video", e);
+        });
+      }
+      return;
     }
+    idleVideoElement.value.src = videoIdleURL.value;
+    idleVideoElement.value.loop = true;
+    idleVideoElement.value.muted = true;
+    idleVideoElement.value.play().catch((e) => {
+      console.error("Failed to play idle video", e);
+    });
   };
   const setVideoElement = (stream: MediaStream) => {
     if (!stream) return;