Speech-to-text with javascript in Chrome doesn't recognize anything

Question

I am trying to write a code in JAVASCRIPT which takes an input using voice and converts it into text and puts this text into textarea(HTML). My code is as shown below. The button appears kinda strange(smaller than usual) and when you click it, it doesnt work as desired. Please help.

My code is as follows:

<textarea id="textarea" rows=10 cols=80></textarea>
<button id="button" onclick="toggleStartStop()"></button>

<script type="text/javascript">
var recognizing;
var recognition = new SpeechRecognition();
recognition.continuous = true;
reset();
recognition.onend = reset();

recognition.onresult = function (event) {
  for (var i = resultIndex; i < event.results.length; ++i) {
    if (event.results.final) {
      textarea.value += event.results[i][0].transcript;
    }
  }
}

function reset() {
  recognizing = false;
  button.innerHTML = "Click to Speak";
}

function toggleStartStop() {
  if (recognizing) {
    recognition.stop();
    reset();
  } else {
    recognition.start();
    recognizing = true;
    button.innerHTML = "Click to Stop";
  }
}

Solution

Looks like you are using some outdated sample code from the W3 site: http://lists.w3.org/Archives/Public/public-speech-api/2012Oct/0032.html

Are you using Google Chrome? Open the JavaScript console, it should reveal this problem:

Uncaught ReferenceError: SpeechRecognition is not defined

Here's a sample page that does work: https://www.google.com/intl/en/chrome/demos/speech.html

It's all HTML5, so you can have a look at the entire source and learn from it. Have fun!

EDIT: Minimum changes needed to make OP's code sample work on Google Chrome:

• replace SpeechRecognition by webkitSpeechRecognition
• replace resultIndex by event.resultIndex
• replace event.results.final by event.results[i].isFinal

Resulting code:

<textarea id="textarea" rows=10 cols=80></textarea>
<button id="button" onclick="toggleStartStop()"></button>

<script type="text/javascript">
var recognizing;
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
reset();
recognition.onend = reset();

recognition.onresult = function (event) {
  for (var i = event.resultIndex; i < event.results.length; ++i) {
    if (event.results[i].isFinal) {
      textarea.value += event.results[i][0].transcript;
    }
  }
}

function reset() {
  recognizing = false;
  button.innerHTML = "Click to Speak";
}

function toggleStartStop() {
  if (recognizing) {
    recognition.stop();
    reset();
  } else {
    recognition.start();
    recognizing = true;
    button.innerHTML = "Click to Stop";
  }
}
</script>

Comments

[Akhilesh Bhatia]

Thanks..but they too have used javascript and my code is pretty much similar to theirs! :(

[Ruud Helderman]

@user3510165: Except for the fact that Google's code works and yours does not. You use class SpeechRecognition, Google use class webkitSpeechRecognition; apparently that's a relevant difference.

[Akhilesh Bhatia]

Oh i didnt realize it. Thank you. But now that i changed it and opened chrome using --allow-file-access-from-files method, the only difference is that the button appears normally and when i click it, i am asked the permission to use the microphone. Once i allow it and start talking...then nothing appears in the textbox!!

[Ruud Helderman]

@user3510165: There were more quirks in W3's code sample; see my edit above for the full list of fixes. Personally, I'd abandon that code and go for Google's. When somebody gives you a free Mercedes, you drive it; you don't use it to harvest spare parts for your broken-down Nissan.

[Akhilesh Bhatia]

Working perfectly now. Thank you so much! Appreciate the help! :)

[forgottofly]

I'm using var recognition = new SpeechRecognition(); for android device but its not working.what can be the issue?