How to automatically Start google speech recognition on my page?

I wrote a HTML5 webpage consisting only of:

<input type="text" style="font-size: 40px;"  name="speech" size="50"  x-webkit-speech/> 

What I'm trying to do is to get the x-webkit-speech to start automatically as soon as I enter the page and continously put out the speech recognition results into the text. How would I do that ? I've seen various javascripts relating to that and I tested a lot of them but they don't work for me.

Thanks to anyone who answers ! ;)

Answers


You can try to use Web Speech API, for example:

if ('webkitSpeechRecognition' in window) {
  var recognition = new webkitSpeechRecognition();
  var final_transcript = '';
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onresult = function( event ) {
    var final_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } 
    }
    document.getElementById( 'speech' ).value = final_transcript;
  };
  recognition.start();
}

The only one thing is that you will need to allow page to use microphone at page load

jsFiddle demo


Need Your Help

Render CSS3 gradient on IE9 with radial orientation

html css3 internet-explorer-9 radial-gradients

Im using Colorzilla gradient generator(http://www.colorzilla.com/gradient-editor/) to create a radial gradient for my site and I wanted to have the ellipse at the bottom.