Speech recognition not working in chrome

Question

I am trying to access the audio from chrome browser using javascript code below, but when I click the the button the recognition.onresult event is not firing in chrome browser, however when I access the online webpage that contains live demo of speech to text, its working fine in chrome browser please help.

<script type="text/javascript">
  var recognition = new SpeechRecognition();
  recognition.onresult = function(event)
  {
    if (event.results.length > 0) 
    {
       alert("Working");
    }
  }
</script>

<form>
  <input type="button" value="Click to Speak"onclick="recognition.start()">
</form>

Answer 1

I just tried on my computer and it works:

$(function () {
  try {
    var recognition = new webkitSpeechRecognition();
  } catch (e) {
    var recognition = Object;
  }
  recognition.continuous = true;
  recognition.interimResults = true;
  recognition.onresult = function (event) {
    var txtRec = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      txtRec += event.results[i][0].transcript;
    }
    $('#txtArea').val(txtRec);
  };
  $('#startRecognition').click(function () {
    $('#txtArea').focus();
    recognition.start();
  });
  $('#stopRecognition').click(function () {
    recognition.stop();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="startRecognition">Start Recognition</button>
<button id="stopRecognition">Stop Recognition</button>
<textarea id="txtArea"></textarea>