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;
  displayTextPrompt(voiceLocaleKeys.ready, "");
  promptIsListening();
}

function onspeechstart() { //ntp_Bn
  microphoneListeningState = 5;
  spchcEl.className = "spchc s2ra";
  spchEl.style.backgroundColor = "rgba(255, 255, 255,...