JSFiddle - React, Tailwind, and code Playground

HTML

<p></p>
<textarea></textarea>
<input type="submit" value="Go!" />

CSS

textarea {
    width:600px;
    height:500px;
    padding:5px;
    line-height:1.4;
    font-family:helvetica, sans-serif;
}
p {
    font-size:18px;
}
}

JavaScript

function Enunciate(ta) {
    var _this = this;
    this.awaitNext = true; // awaiting next word to type
    this.history = [];
    this.lastTyped = null;
    ta.addEventListener('keypress', function (ev) {
        _this.lettercapture(ev.keyCode);
    });
}
Enunciate.prototype.lettercapture = function (keyCode) {
    var letter,
    timediff;

    letter = String.fromCharCode(keyCode);
    if (this.history.length === 0) {
        timediff = 0;
    } else {
        timediff = Date.now() - this.lastTyped;
    }
    this.lastTyped = Date.now();

    this.history.push({
        delay: timediff,
        char: letter
    });
};
Enunciate.prototype.replayTo = function (target) {
    var i,
    totDelay = 0,
        _this = this,
        len,
        sendChar = function (i) {
            target.textContent += _this.history[i].char;
        };
    for (i = 0, len = this.history.length; i < len; i++) {
        //debugger;
        setTimeout(sendChar(i), 10000);
    }
};

var mytype = new Enunciate(document.querySelector('textarea'));

document.querySelector('input[type=submit]').addEventListener('click', function () {
    mytype.replayTo(document.querySelector('p'));
});