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";
  }
}

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";
  }
}

• javascript
• html
• google-chrome
• speech-recognition

• "doesnt work as desired" isn't much of a description. You'll have to be more specific than that. – Biffen Commented Apr 8, 2014 at 9:54
• @Biffen when i click on the strange looking button and start speaking on the microphone it should convert my voice to text but it doesnt....i meaning nothing happens at all. – Akhilesh Bhatia Commented Apr 8, 2014 at 10:03
• which browser you test ? – emesday Commented Apr 8, 2014 at 10:11
• @mskimm i am using google chrome – Akhilesh Bhatia Commented Apr 8, 2014 at 10:21

1 Answer 1

Looks like you are using some outdated sample code from the W3 site: http://lists.w3/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./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>