JSFiddle - React, Tailwind, and code Playground

by lun471k

HTML

<input type="text" id="field" x-webkit-speech>
    <button id="start">start</button>
     <button id="stop">stop</button>

JavaScript

window.recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = "fr";

recognition.onresult = function (event) {
    // Calculating and saving the cursor position where the text will be displayed
    var textArea = $('#field'); 
    var pos = textArea.getCursorPosition() - interimResult.length;
    // Deleting an interim result from the textArea field
    textArea.val(textArea.val().replace(interimResult, ''));
    interimResult = '';
    // Restoring the cursor position
    textArea.setCursorPosition(pos);
    for (var i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
            insertAtCaret(textAreaID, event.results[i][0].transcript);
        } else {
            // Outputting the interim result to the text field and adding
            // an interim result marker - 0-length space
            insertAtCaret(textAreaID, event.results[i][0].transcript + '\u200B');
            interimResult += event.results[i][0].transcript + '\u200B';
        }
    }
};

$('#start').click(function(){recognition.start();});
$('#stop').click(function(){recognition.stop();});