ISNIT0/index.html

## index.html
<html>

<head>
</head>

<body>

    <p class="verse"></p>

</body>
<script src="./dist/index.js"></script>

</html>

## index.ts
const $verse = document.querySelector("p.verse");

const _SpeechRecognition =
  (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
const _SpeechGrammarList =
  (window as any).SpeechGrammarList || (window as any).webkitSpeechGrammarList;

const verse =
  "The thief comes only to steal and kill and destroy; I have come that they may have life, and have it to the full";
const verseParts = verse.replace(/[^A-z ]/g, "").split(" ");
const grammar = verse.split(" ");
console.log(verse);

const recognition = new _SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = "en-US";
recognition.maxAlternatives = 1;
const speechRecognitionList = new _SpeechGrammarList();

speechRecognitionList.addFromString(verse, 1);

document.body.onclick = () => {
  recognition.start();
};

let autoRestartCount = 0;
let verseIndex = 0;
let isListening = false;
let lastStartedAt = Date.now();

recognition.onresult = (event: any) => {
  const transcript = event.results[event.results.length - 1][0].transcript;
  const transcriptWords = transcript.split(" ");
  for (const word of transcriptWords) {
    console.log({ word, verseParts, verseIndex });
    if (word.toLowerCase() === verseParts[verseIndex].toLowerCase()) {
      $verse?.append(" " + word);
      verseIndex++;
    }
  }
  console.log({ transcript }, event);
  console.log(`Confidence: ${event.results[0][0].confidence}`);
};

// https://github.com/TalAter/annyang/blob/1ee294e2b6cb9953adb9dcccf4d3fcc7eca24c2c/src/annyang.js#L214
recognition.onspeechend = function () {
  console.log("ended, restarting");
  isListening = false;
  // play nicely with the browser, and never restart annyang automatically more than once per second
  var timeSinceLastStart = Date.now() - lastStartedAt;
  autoRestartCount += 1;
  if (autoRestartCount % 10 === 0) {
    console.log(
      "Speech Recognition is repeatedly stopping and starting. See http://is.gd/annyang_restarts for tips."
    );
  }
  if (timeSinceLastStart < 1000) {
    setTimeout(function () {
      recognition.start();
    }, 1000 - timeSinceLastStart);
  } else {
    recognition.start();
  }
};

recognition.onerror = (event: any) => {
  console.log(`Error occurred in recognition: ${event.error}`);
};
	<html>

	<head>
	</head>

	<body>

	<p class="verse"></p>

	</body>
	<script src="./dist/index.js"></script>

	</html>
	const $verse = document.querySelector("p.verse");

	const _SpeechRecognition =
	(window as any).SpeechRecognition \|\| (window as any).webkitSpeechRecognition;
	const _SpeechGrammarList =
	(window as any).SpeechGrammarList \|\| (window as any).webkitSpeechGrammarList;

	const verse =
	"The thief comes only to steal and kill and destroy; I have come that they may have life, and have it to the full";
	const verseParts = verse.replace(/[^A-z ]/g, "").split(" ");
	const grammar = verse.split(" ");
	console.log(verse);

	const recognition = new _SpeechRecognition();
	recognition.continuous = true;
	recognition.interimResults = true;
	recognition.lang = "en-US";
	recognition.maxAlternatives = 1;
	const speechRecognitionList = new _SpeechGrammarList();

	speechRecognitionList.addFromString(verse, 1);

	document.body.onclick = () => {
	recognition.start();
	};

	let autoRestartCount = 0;
	let verseIndex = 0;
	let isListening = false;
	let lastStartedAt = Date.now();

	recognition.onresult = (event: any) => {
	const transcript = event.results[event.results.length - 1][0].transcript;
	const transcriptWords = transcript.split(" ");
	for (const word of transcriptWords) {
	console.log({ word, verseParts, verseIndex });
	if (word.toLowerCase() === verseParts[verseIndex].toLowerCase()) {
	$verse?.append(" " + word);
	verseIndex++;
	}
	}
	console.log({ transcript }, event);
	console.log(`Confidence: ${event.results[0][0].confidence}`);
	};

	// https://github.com/TalAter/annyang/blob/1ee294e2b6cb9953adb9dcccf4d3fcc7eca24c2c/src/annyang.js#L214
	recognition.onspeechend = function () {
	console.log("ended, restarting");
	isListening = false;
	// play nicely with the browser, and never restart annyang automatically more than once per second
	var timeSinceLastStart = Date.now() - lastStartedAt;
	autoRestartCount += 1;
	if (autoRestartCount % 10 === 0) {
	console.log(
	"Speech Recognition is repeatedly stopping and starting. See http://is.gd/annyang_restarts for tips."
	);
	}
	if (timeSinceLastStart < 1000) {
	setTimeout(function () {
	recognition.start();
	}, 1000 - timeSinceLastStart);
	} else {
	recognition.start();
	}
	};

	recognition.onerror = (event: any) => {
	console.log(`Error occurred in recognition: ${event.error}`);
	};