JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<textarea id="txt-speech"></textarea>

CSS

#txt-speech {
    width: 400px;
    height: 100px;
    background: #ff33ff
}

JavaScript

var txtSpeech = $('#txt-speech'),
    validEffects = ['bounce', 'explode', 'shake'],
    recognition = new webkitSpeechRecognition();

recognition.continuous = true;
recognition.interimResults = true;

recognition.onstart = function () {
    console.log('starting');
};

recognition.onend = function () {
    console.log('stoping');
};

recognition.onresult = function (e) {
    var final = 0,
        speech = '';

    for (var i = e.resultIndex, l = e.results.length; i < l; i++)
    if (e.results[i].isFinal) {
        speech += e.results[i][0].transcript;
        final = 1;
    }

    if (final && speech) {
        speech = speech.trim();

        ($.inArray(speech, validEffects) !== -1) ? txtSpeech.effect(speech) : txtSpeech.val(speech)
    }
};

recognition.start();