JSFiddle - React, Tailwind, and code Playground

by huston007

HTML

<div id="cont">
    
<a id="start" onclick="recognition.start()">start</a>
<a id="stop" onclick="recognition.stop()">stop</a>
    
</div>

JavaScript

$(function(){
    
  recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;
  //recognition.lang = select_dialect.value;
  //recognition.start();

    var container = $("#cont");
    container.off("click", "#start").on("click", "#start", function(e) {
        recognition.start();        
    });

    container.off("click", "#start").on("click", "#start", function(e) {
        recognition.stop();        
    });

  recognition.onresult = function(event) {
    var interim_transcript = '';
    debugger;
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    
  };

});