JSFiddle - React, Tailwind, and code Playground

HTML

<div class="typebox"></div>

CSS

body {
  background-color: black;
  font-family: 'Courier New', 'monospace';
}

.typebox {
  font-size: 14px;
  color: lime;
}

JavaScript

var hal = window.speechSynthesis

setTimeout(function() {
  var phrase = new SpeechSynthesisUtterance('That didn\'t work. Ha ha ha')
  phrase.voice = hal.getVoices[0]
  phrase.pitch = 1
  phrase.rate = 1.2
  hal.speak(phrase)
  
  hal.getVoices().forEach((voice,i) => {
    console.log(voice.name, voice.lang, voice, i)
  })
})

var string = "We are watching you...Zak.",
  chars = string.split(''),
  $typebox = $('.typebox'),
  i = 0;

function randomInt() {
  return Math.round(Math.random() * (100 - 100) + 100);
}

function typer() {
  var int = randomInt();
  setTimeout(function() {
    $typebox.append(chars[i]);
    i++;
    if (i < chars.length) {
      typer();
    }
  }, int);
}

typer();