JS Speech Recognition

Reverse Engineered from https://www.google.com/

by craigcav

HTML

<div class="spch s2fp" id="spch">
  <div class="spchc s2ml" id="spchc">
    <div class="_o3">
      <div class="_AM">
        <span class="_CMb" id="spchl"></span>
        <span class="button" id="spchb">
            <div class="_wPb">
              <span class="_AUb"></span>
        <div class="_Fjd">
          <span class="_oXb"></span>
          <span class="_dWb"></span>
        </div>
      </div>
      </span>
    </div>
    <div class="_gjb">
      <span class="spcht spch-2l" id="spchi" style="color:#777">
            Speak now 
            <span id="spchta" class="spchta" style="display: none">Try again</span>
      </span>
      <span class="spcht" id="spchf" style="color:#000"></span>
    </div>
    <div class="google-logo"></div>
  </div>
  <div class="_ypc">
    <div class="_zpc"></div>
  </div>
</div>
</div>

CSS

body {
  font: small arial, sans-serif;
  margin: 0;
  min-height: 616px;
  text-align: -webkit-center;
}

.spch {
  background: #fff;
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  text-align: left;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 10000;
  transition: visibility 0s linear 0.218s, opacity 0.218s, background-color 0.218s;
}

.s2fp.spch {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.s2fp .spchc,
.s2fp-h .spchc {
  margin: auto;
  margin-top: 312px;
  max-width: 572px;
  min-width: 534px;
  padding: 0 223px;
  position: relative;
  top: 0;
}

.spchc {
  display: block;
  height: 42px;
  position: absolute;
  pointer-events: none;
}

._o3 {
  height: 100%;
  opacity: .1;
  pointer-events: none;
  width: 100%;
  transition: opacity .318s ease-in;
}

.s2ml ._o3,
.s2ra ._o3,
.s2er ._o3 {
  opacity: 1;
  transition: opacity 0s;
}

.s2fp ._AM,
.s2tb ._AM {
  transform: scale(1);
}

.s2fp-h ._AM,
.s2tb-h ._AM {
  transform: scale(.1);
}

.s2fp-h ._AM,
.s2fp ._AM {
  height: 165px;
  right: -70px;
  top: -70px;
  width: 165px;
}

.s2fp .button,
.s2tb .button {
  opacity: 1;
  pointer-events: auto;
  position: absolute;
  transform: scale(1);
  transition-delay: 0;
}

.s2fp-h .button {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition-delay: 0;
}

._AM {
  float: right;
  pointer-events: none;
  position: relative;
  transition: transform 0.218s, opacity 0.218s ease-in;
}

._CMb {
  background-color: #dbdbdb;
  border-radius: 100%;
  display: inline-block;
  height: 301px;
  left: -69px;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  top: -69px;
  width: 301px;
  transform: scale(.01);
  transition: opacity 0.218s;
}

.s2ra .button {
  background-color: #ff4444;
  border: 0;
  box-shadow: none
}

.button {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 100%;
  bottom: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  cursor: pointer;
 ...

JavaScript

var lang; // lang = ntp_im
    var spchEl; // spchEl = ntp_Im
    var spchcEl; // spchcEl = ntp_Jm
    var spchfEl; // spchfEl = ntp_ym
    var spchiEl; // spchiEl = ntp_6
    var spchbEl; // spchbEl = ntp_um
    var spchlEl; // spchlEl = ntp_vm
    var speechRecognition; // speechRecognition = ntp_5
    var isListening; // isListening = ntp_wm
    var microphoneListeningState; // microphoneListeningState = ntp_$
    var spokenWords; // spokenWords = ntp_fm;
    var interimWords; // interimWords = ntp_hm;
    var promptWaitingForAudioInstructionTimeout;
    var promptIsListeningTimeout;

    var localeKeys = {
      "lang": "en-US"
    };
    var voiceLocaleKeys = { // ntp_mm
      "listening": "Listening...", //Ec
      "ready": "Speak now",
      "tryAgain": "Didn't get that. <span>Try again</span>", //Hc
      "waiting": "Waiting...",
      "checkMicrophone": "Please check your microphone.", //Zb
      "noInternet": "No Internet connection", //Gc
      "notAvailable": "Voice search not available", //Cc
      "voiceSearchDisabled": "Voice search has been turned off.", //Rc
      "checkMicrophoneAndAudioLevels": "Please check your microphone and audio levels." //Ic
    };

    var getElementById = document.getElementById.bind(document); // getElementById = ntp_J


    function start() { // ntp_Jn
      spchEl.className = "spch s2fp";

      clearMicrophoneInstruction();
      try {
        speechRecognition.start();
        microphoneListeningState = 3;
      } catch (a) {
        microphoneListeningState = 2;
        initSpeechRecognition();
        try {
          speechRecognition.start(),
            microphoneListeningState = 3;
        } catch (b) {
          microphoneListeningState = 10;
          hideMicrophone();
        }
      }
    }

    function onaudiostart() { // ntp_An
      spchcEl.className = "spchc s2ml";
      window.clearTimeout(promptWaitingForAudioInstructionTimeout);
      microphoneListeningState = 4;
     ...