JSFiddle - React, Tailwind, and code Playground

by Priya Ahuja

HTML

<div><img alt="Start" id="start_img" src="https://speechlogger.appspot.com/images/micoff2.png"></div>

JavaScript

if(!('webkitSpeechRecognition' in window)){
      console.log("Speech not supported here");
    }
      else{
        var recognition = new webkitSpeechRecognition();//The object that will manahe our whole recognition process
        recognition.continous = true;
        recognition.lang="en-US";
        recognition.maxAlternatives = 1;
      

      recognition.onstart = function() {
        console.log("on start");
    //Listening (capturing voice from audio input) started.
    //This is a good place to give the user visual feedback about that (i.e. flash a red light, etc.)
};

recognition.onend = function() {
  console.log("on end");
    //Again – give the user feedback that you are not listening anymore. If you wish to achieve continuous recognition – you can write a script to start the recognizer again here.
};

recognition.onresult = function(event) { //the event holds the results
//Yay – we have results! Let’s check if they are defined and if final or not:
    if (typeof(event.results) === 'undefined') { 
    //Something is wrong…
    console.log("event.results",event.results);
        recognition.stop();
        return;
    }

    for (var i = event.resultIndex; i < event.results.length; ++i) {      
        if (event.results[i].isFinal) { //Final results
            console.log("final results: " + event.results[i][0].transcript);   //Of course – here is the place to do useful things with the results.
        } else {   //i.e. interim...
            console.log("interim results: " + event.results[i][0].transcript);  //You can use these results to give the user near real time experience.
        } 
    } //end for loop
};
}


}