JSFiddle - React, Tailwind, and code Playground

by Tgwizman

HTML

<textarea id="text"></textarea>

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

textarea {
    width: 100%;
    height: 100%;
}

JavaScript

var SPEECH = (function() {
    function SPEECH() {
        this.getVoices();
    }
    SPEECH.prototype.listen = function(f) {
        var recognition = new webkitSpeechRecognition();
        recognition.start();
        recognition.onresult = function(event) {
            if (typeof f == 'function') f(event.results[0][0].transcript);
        };
    };
    SPEECH.prototype.say = function(str, f, voice) {
        var msg = new SpeechSynthesisUtterance(str);
        msg.voice = this.voices[(typeof voice == 'number')? voice : 10];
        msg.onend = function() {
            f();
        };
        window.speechSynthesis.speak(msg);
    };
    SPEECH.prototype.getVoices = function() {
        this.voices = window.speechSynthesis.getVoices();
    };
    return SPEECH;
})();

function $(t){return document.getElementById(t)}

var text = $('text'),
    jarvis = new SPEECH();

setTimeout(function() {
    jarvis.getVoices();
}, 10);

text.onkeyup = function(e) {
    if (e.keyCode == 13) {
        jarvis.say('listening', function () {
            jarvis.listen (function(msg) {
                text.innerText = msg;
            });
        });
    }
};