How to add speech to text to a JS application?

Question

I would like to implement speech to text to this application which I have found on github. Its using IBM Watson APIs. The applications is available here -> https://github.com/IBM/watson-banking-chatbot

But all my attempts did not work so far... I am using chrome webkit speech recognition for stt since its much better that IBMs tts.

I tried it with the following snippets in the index.html file...

I changed this...

<label for="textInput" class="inputOutline">
          <input id="textInput" class="input responsive-column"
            placeholder="Type something" type="text" value=""
            onkeydown="/*globals CanvasJS */
            ConversationPanel.inputKeyDown(event, this)">
        </label>

to this piece of code...

<label for="textInput" class="inputOutline">
<div id="textInput" class="input responsive-column" type="text" placeholder="Type something" ></div></label>

This is the speech recognition part which should send the question by the keyword "ASK"...

<button onclick="startConverting();"><i class="fa fa-microphone"></button>
<script type="text/javascript">



	var r = document.getElementById('textInput');
	function startConverting (){

		if('webkitSpeechRecognition' in window){
	var speechRecognizer = new webkitSpeechRecognition();
	speechRecognizer.continuous = true;
	speechRecognizer.interimResults = true;
	speechRecognizer.lang = 'en-IN';
	speechRecognizer.start();

	var finalTranscripts = '';

	speechRecognizer.onresult = function(event){
          var interimTranscripts = '';
          for(var i = event.resultIndex; i < event.results.length; i++){
          	var transcript = event.results[i][0].transcript; 
          	transcript.replace("\n", "<br>");
          	if(event.results[i].isFinal){
          		finalTranscripts += transcript;
          	}else{
          		interimTranscripts += transcript;
          	}}
 

 if(finalTranscripts.includes('two')){
           window.alert('It works');


          }


 if(finalTranscripts.includes('ask')){
           ConversationPanel.send(finalTranscripts, this);


          }         

          r.innerHTML = finalTranscripts + '<span style="color#999' +interimTranscripts + '</span>'; 
	};

	speechRecognizer.onerror = function (event) {

	};



}else {
	r.innerHTML = 'please update google chrome ';
}

	}



</script>
                



        <!--        <button id="speak-btn">Speak</button>-->
        <audio autoPlay="true" id="audio"
               className="audio" 
               controls="controls">
              Your browser does not support the audio element.
        </audio>

I'm dealing already since a longer time with this problem. I am happy for any kind of help!