add speech recorder + ws

src/components/microphone/index.vue

@@ -7,64 +7,7 @@
 <script>
  import { defineComponent } from 'vue';
  export default defineComponent({
-   name: 'Microphone',
-   async setup() {
-     const bufferLen = 4096;
-     const numChannels = 1;
-     window.AudioContext = window.AudioContext || window.webkitAudioContext;
-     const audioContext = new AudioContext();
-
-      let result;
-      let cWasm;
-      const getCwasm = async () => {
-        await import('../../../crate/pkg').then(async module => {
-            cWasm = module;
-        });
-      }
-     await getCwasm();
-
-     function handleStream(stream) {
-       const source = audioContext.createMediaStreamSource(stream);
-       const context = source.context;
-       // NOTE might come in handy for VAD
-       // const sampleRate = context.sampleRate;
-
-       const node = context.createScriptProcessor.call(
-         context,
-         bufferLen,
-         numChannels,
-         numChannels
-       );
-
-       node.onaudioprocess = async e => {
-         const inputBuff = new Float32Array(bufferLen);
-         // get data from audio event and copy into inputBuff
-         e.inputBuffer.copyFromChannel(inputBuff, 0);
-         const int16 = new Int16Array(inputBuff.buffer);
-         result = await cWasm.foo(int16);
-
-           // TODO add handle audio stream to main process?
-           // window.postMessage(
-           //   {
-           //     myTypeField: "handle-audio-stream",
-           //     audioData: int16,
-           //   },
-           //   "*"
-           // );
-       };
-       source.connect(node);
-       node.connect(context.destination);
-     }
-
-       navigator.mediaDevices
-         .getUserMedia({ audio: true })
-           .then(s => {
-             handleStream(s);
-           }).catch(error => {
-             throw error;
-
-           });
-   }
+     name: 'Microphone',
  })
 
 </script>