Speech to text breaking in between Webkit

Question

I have created a form in which questions will populate automatically and answers will be captured via speech. I tried using JS webkit library but it is not working properly and speech is not getting recognized. It picks up previous speech text and keeps on adding to newly generated string, but at time it works fine. If anyone is capturing speech and converting it to text, let me know. Any help will be appreciated.

Code below-

var recognition = new webkitSpeechRecognition();
recognition.lang = "en-IN";
// recognition.lang = "hi-IN";
function startTextToSpeech(){
var recognizing = false;
var ignore_onend;
var start_timestamp;
recognition.continuous = true;
recognition.interimResults = true;
var interim_text = document.getElementById('Mytext')
var final_text = document.getElementById('final_span')
var textExtracted = "";
var final_transcript = '';
recognition.onstart = function() {
    recognizing = true;
  };


recognition.onerror = function(event) {
  console.log("some error ouccured");
  console.log(event)
  recognition.stop();
  try{
      recognition.start();
    }catch(ex){
      console.log(ex)
    }
   if (event.error == 'no-speech') {   
      ignore_onend = true;
    }
    if (event.error == 'audio-capture') {
      ignore_onend = true;
    }
    if (event.error == 'not-allowed') {
      ignore_onend = true;
    }
  };

   recognition.onend = function() {
    console.log("ended")
    // recognizing = false;
    // recognition.start();
    // //switchApi();
    // if (ignore_onend) {
    //   $("#toggleStart").text("Start");
    //   $("#listenStatus").text("Speak something to convert it to text");     
    //   //clearInterval(StartAnalyzing);

    //   return;
    // }
    recognition.stop();
    try{
      recognition.start();
    }catch(ex){
      console.log(ex)
    }

    // if (window.getSelection) {
    //  recognition.start();
    //  switchApi();
    //   window.getSelection().removeAllRanges();
    //   var range = document.createRange();
    //   range.selectNode(document.getElementById('final_span'));
    //   window.getSelection().addRange(range);
    // }
  };

recognition.onresult = function(event) { 

  var interim_transcript = '';
    if (typeof(event.results) == 'undefined') {
      recognition.onend = null;
      //recognition.stop();
      return;
    }

    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_text.innerHTML = final_transcript;
    interim_text.innerHTML = interim_transcript;
    textExtracted = final_transcript+interim_transcript;
}
recognition.start();
}

Answer 1

Your Code has no errors and it should work in the latest versions of chrome or opera but not sure of Firefox,IE and Safari, just try updating your browser to be sure of what you are doing.