add speechrecorder to background

src/background.ts

@@ -6,12 +6,14 @@ import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
 const isDevelopment = process.env.NODE_ENV !== "production";
 import * as path from "path";
 import { SpeechRecorder } from "speech-recorder";
+const fs = require('fs');
 
 // TODO: connect To Crimata-BE
 import WebSocket from "ws";
 
 
-// const recorder = new SpeechRecorder({ sampleRate: 16000, framesPerBuffer: 320 });
+const recorder = new SpeechRecorder({ sampleRate: 16000, framesPerBuffer: 320, level: 0 });
+// const writeStream = fs.createWriteStream("audio.raw");
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -73,6 +75,31 @@ function createWindow() {
     ipcMain.on('update-menu-bar', (Event: any, payload: any) => {
     // win.setTitle("Listening...");
     })
+
+    let audioData: any[] = [];
+    ipcMain.on('update-recorder', (Event: any, record: boolean) => {
+     console.log('updating recorder', record)
+     if (record) {
+       recorder.start({
+         onAudio: (audio: any) => {
+           audioData.push(audio)
+           // writeStream.write(audio);
+         }
+       })
+     } else {
+       recorder.stop()
+       // send audio to BE
+       const message = {
+         text: '',
+         audio: audioData
+       }
+       ws.send(JSON.stringify(message))
+       console.log('sent', message)
+
+       // clear audio.raw file
+       audioData = [];
+     }
+    })
   })
 
   win.on("closed", () => {

src/core/UI/input/useInputController.ts

@@ -36,7 +36,11 @@ export default function useInputController() {
   function keyupHandler(e: any) {
     if (e.key === " " && visualizeStream.value) {
       console.log("stop recording");
-      recorder.stop();
+      // recorder.stop();
+      window.postMessage({
+        myTypeField: 'update-recorder',
+        record: false
+      }, '*')
       visualizeStream.value = false;
       paths.value = []
       audioBubbleWidth.value = 10;
@@ -55,7 +59,6 @@ export default function useInputController() {
     recorder = initRecorder(stream);
   })
 
-
   // determine whether to render text or audio based one the keyboard input
   watch(input, (input, prevInput) => {
     if (prevInput !== "" || prevInput.length > 0) {
@@ -67,7 +70,12 @@ export default function useInputController() {
     if (input === " " && visualizeStream.value === false) {
       console.log("record MediaStream");
       visualizeStream.value = true;
-      recorder.start();
+      // recorder.start();
+
+      window.postMessage({
+        myTypeField: 'update-recorder',
+        record: true
+      }, '*')
       expandBubble(audioBubbleWidth);
       visualizeStreamAsPaths(stream, paths, audioBubbleWidth);
       return;

src/preload.ts

@@ -21,6 +21,10 @@ process.once("loaded", () => {
     if (message.myTypeField === "update-menu-bar") {
       ipcRenderer.send("update-menu-bar", message);
     }
+
+    if (message.myTypeField === "update-recorder") {
+      ipcRenderer.send("update-recorder", message.record);
+    }
   });
 });