Add basic speech-to-text functionality

[hauptdigital]

In this pull request I added the basic speech-to-text functionality on the website. Users are now able to start and stop recording of notes, speak English text and the app will output transscribed text.

Test it here:
https://dev.deepspeech-notes.haupt.digital/

You have to speak very clearly and a good microphone will also help the accuracy of the language processing.

To create this feature, I developed this process using different technologies:

• Web Audio API (https://developer.mozilla.org/de/docs/Web/API/Web_Audio_API)
• Voice activity detection (node-vad npm module)
• deepspeech (deepspeech npm module)
• socket.io (socket.io and socket.io-client npm modules)
• downsampler code from web-voice-processor npm module

To document the functionality, I added this table:

	File	Order	Task
Back end	server.js model.js	1	Create deepspeech language model on Express server start
Back end	server.js socker.js	2	Start socket on Express server start
Front end	Notes.js audio.js	3	Create media stream source from browser microphone and start socket on user interaction with microphone
Front end	audio.js voice-processor.js	4	Create mono audio buffer from microphone media stream
Front end	audio.js downsampler.js	5	Resample audio buffer to 16.000 sample rate
Front end	audio.js	6	Send buffer to backend via socket
Back end	audio.js	7	Identify voice bits in received audio with voice activity detection module
Back end	audio.js model.js	8	Transcribe identified voice bits into text
Back end	audio.js socket.js	9	Emit transcribed text to front end via socket
Front end	Notes.js audio.js	10	Display transcribed text on page
Front end	Notes.js audio.js	11	Close media stream, audio processing and socket on user interaction (deactivate microphone)

[lmachens]

Awesome 🎉
Recording works for me too.

I reviewed most of the files and have to say, that I am very impressed 👍 . Keep up the good work.
Some of my comments are code style-related. It's up to you :).

[lmachens]

Looks like you have a memory leak here.
This event listener is never destroyed.
Every time you start a new recording, it will create a new listener on the recognize event. This listener (or callback) remains in memory and might be executed.

It's important to remove that listener when you stop recording:
https://socket.io/docs/server-api/#socket-removeListener-eventName-listener
This issue happens in multiple files.

    function handleRecognize(recognized) {
      updateNoteContent(recognized.text);
    }

    function handleRecordButtonClick() {
      const socket = getSocket();
      if (!isRecording) {
        setIsRecording(startRecording());  
        socket.on('recognize', handleRecognize);
      } else {
        socket.removeListener('recognize', handleRecognize);
        setIsRecording(stopRecording().isRecording);
      }
    }

This would be a good case for an useEffect if you want to have it more React-like (I recommend this solution):

   React.useEffect(() => {
     if (!isRecording) {
       return;
     }

     function handleRecognize(recognized) {
        updateNoteContent(recognized.text);
     }

     const socket = getSocket();
     socket.on('recognize', handleRecognize);

     return () => {
       socket.removeListener('recognize', handleRecognize);
     }
   }, [isRecording]);

   function handleRecordButtonClick() {
      if (!isRecording) {
        setIsRecording(startRecording());
      } else {
        setIsRecording(stopRecording().isRecording);
      }
    }

[hauptdigital]

I applied your solution with useEffect and it works. Thanks! But I don't know why it works 😅

What is the meaning of this:

 return () => {
       socket.removeListener('recognize', handleRecognize);
     }

To me it looks like this would directly remove the socket.on event listener. But when I run my application, I see that everything works as intended.

[lmachens]

Take a look at the useEffect documentation to understand what the return function is used for :)