JSFiddle - React, Tailwind, and code Playground

by daver182

HTML

<body>
  <p id="texto"></p>
<body>

JavaScript

$(document).ready(function(){
	var final_transcript = '';
	var recognizing = false;
	if (('webkitSpeechRecognition' in window)) {
		var recognition = new webkitSpeechRecognition();
		recognition.continuous = true;
		recognition.interimResults = true;
	
	recognition.onstart = function() { console.log('start'); recognizing = true;}
	recognition.onend = function() { console.log('end'); recognizing = false;}
	
	recognition.onresult = function(event) {
		var interim_transcript = '';
		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;
			}
		}
		
		console.log('inter = ' + interim_transcript)
		console.log('final = ' + final_transcript)
        $('#texto').html(final_transcript)
	}
	
	if (recognizing) {
		recognition.stop();
		return;
	}
	
	final_transcript = '';
	recognition.lang = 'es-CL';
	recognition.start();
	}
});