JSFiddle - React, Tailwind, and code Playground

by gokulmaha

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

</script>
</head>
<body>
<span id="alert"></span>
<p id="speech"> </p>

</body>
</html>

JavaScript

try {
  var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  var recognition = new SpeechRecognition();
  recognition.continuous = true;

}
catch(e) {
  console.error(e);
  
}

recognition.onstart = function() { 
   $("#alert").text('Voice recognition activated. Try speaking into the microphone.');
}

recognition.onspeechend = function() {
   $("#alert").text('You were quiet for a while so voice recognition turned itself off.');
}

recognition.onerror = function(event) {
  if(event.error == 'no-speech') {
    $("#alert").text('No speech was detected. Try again.');  
  };
}
recognition.onresult = function(event) {

  // event is a SpeechRecognitionEvent object.
  // It holds all the lines we have captured so far. 
  // We only need the current one.
  var current = event.resultIndex;

  // Get a transcript of what was said.
  var transcript = event.results[current][0].transcript;

  // Add the current transcript to the contents of our Note.
  //noteContent += transcript;
  console.log(transcript);
  $("#speech").append(transcript + "<br>")
  //noteTextarea.val(transcript);
}
 recognition.start();