Speech input

index.html

<h1>Say something</h1>
<div id="inter"></div>
<div id="final"></div>

script.js

var final_transcript = '';
var speech = new webkitSpeechRecognition();
speech.continuous = true;
speech.maxAlternatives = 5;
speech.interimResults = true;
setTimeout(function() {speech.start()}, 2000);
//speech.stop();
speech.onresult = function(e) {
    var interim_transcript = '';
    if (typeof(e.results) == 'undefined') {
      return;
    }
    for (var i = e.resultIndex; i < e.results.length; ++i) {
      var val = e.results[i][0].transcript;
      if (e.results[i].isFinal) {
        final_transcript += " " + val;
        $('#final').text(final_transcript);
      }
     interim_transcript += val;
      $('#inter').text(interim_transcript);
    }
  }

   $().ready(function() {
    $('#say').on('click', function(e) {
      e.preventDefault();
      speech.start();      
    })
  })
  

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Speech input.markdown

Speech input

A Pen by Carl Boneri on CodePen.

License.

style.css

h1 {
  font: bold 12pt arial;
  color: #666;
}
a {
  font: normal 12pt arial;
}
div {
  font: bold 28pt arial;
}
#inter {
  font: normal 12pt arial;
  color: #999;
}