Как добавить речь к тексту в приложение JS?

Question

Я хотел бы внедрить речь в текст этого приложения, которое я нашел на github.Он использует API IBM Watson.Приложения доступны здесь -> https://github.com/IBM/watson-banking-chatbot

Но все мои попытки до сих пор не сработали ... Я использую распознавание речи Chrome WebKit для STT, так как это намного лучше, чем IBM TTS.

Я попробовал это со следующими фрагментами в файле index.html ...

Я изменил это ...

<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>

к этому коду ...

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

Это часть распознавания речи, которая должна отправлять вопрос по ключевому слову "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>

Я уже давно занимаюсь этой проблемой.Я рад за любую помощь!