NickLarsen/teleprompter-speech-recognition.html

## teleprompter-speech-recognition.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Teleprompter</title>
        <style type="text/css">
        html, body {
            height: 100%;
            min-height: 100%;
        }
        #teleprompter {
            position: absolute;
            top: 200px;
            left: 100px;
            border: 3px solid blue;
            overflow: hidden;
            overflow-y: scroll;
            width: 300px;
            height: 200px;
        }
        #teleprompter li {
            margin: 5px 0;
            cursor: pointer;
        }
        .already-said {
            background-color: lightgreen;
        }
        </style>
    </head>
    <body>
        <h1>Teleprompter for google hangouts</h1>
        <h3>This is a prototype, expect this code to be thrown away</h3>
        <div id="teleprompter">
            <ul>
                <li>My name is Nick</li>
                <li>let's wait a minute</li>
                <li>votes from twitter</li>
                <li>
                    why are we building this?
                    <ul>
                        <li>context</li>
                        <li>technologies used</li>
                        <li>problems ran into</li>
                    </ul>
                </li>
                <li>
                    coding execise
                    <ul>
                        <li>what language would you like to use?</li>
                        <li>this is just one part of the overall process</li>
                        <li>we're focused on completeness of the exercise</li>
                        <li>we care about optimality but only a little</li>
                    </ul>
                </li>
                <li>I had a great time</li>
                <li>I'm going to package this up</li>
            </ul>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script type="text/javascript">
            const tele = $("#teleprompter");
            function toggleSaid(e) {
                e.stopPropagation();
                const li = $(this);
                if (li.children("ul").length > 0) return;
                let shouldToggle = li.is(".already-said + li");
                if (!shouldToggle) {
                    const isTopLevelOrNestedReady = li.parent().is("#teleprompter > ul")
                        || li.parent().parent().is(".already-said + li");
                    if (isTopLevelOrNestedReady) {
                        shouldToggle = shouldToggle || li.is(":first-child()");
                    }
                }
                if (!shouldToggle) return;
                li.toggleClass("already-said");
                if (li.parent().is("#teleprompter > ul")) return;
                const parentOff = li.siblings().not(".already-said").length > 0;
                li.parent().parent().toggleClass("already-said", !parentOff);
            }
            tele.on("click", "li", toggleSaid);
            tele.on("click")
        </script>
        <script type="text/javascript">
            const items = $("#teleprompter li")
                .map(function(li, el) {
                    return {
                        text: $(el).text().toLowerCase(),
                        el: $(el)
                    };
                })
                .toArray()
                .filter(str => str.text.charCodeAt(0) != 10);
        </script>
        <script type="text/javascript">
        var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
        var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
        var recognition = new SpeechRecognition();
        recognition.lang = 'en-US';
        recognition.interimResults = false;
        recognition.maxAlternatives = 1;
        recognition.onresult = function(event) {
            var last = event.results.length - 1;
            var text = event.results[last][0].transcript.toLowerCase();
            console.log(typeof(text));
            console.log('Result received: ' + text + '.');
            console.log('Confidence: ' + event.results[0][0].confidence);
            if (text.includes(items[0].text)) {
                items[0].el.trigger("click");
                items.shift();
            }
        }
        recognition.onspeechend = function() {
            console.log("stopping speach recognition");
            recognition.stop();
        }
        recognition.onnomatch = function(event) {
            console.log('I didnt recognise that color.');
        }
        recognition.onerror = function(event) {
            console.log('Error occurred in recognition: ' + event.error);
        }
        $("h1").on("click", function() {
            console.log('Ready to receive a color command.');
            recognition.start();
        });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Teleprompter</title>
	<style type="text/css">
	html, body {
	height: 100%;
	min-height: 100%;
	}
	#teleprompter {
	position: absolute;
	top: 200px;
	left: 100px;
	border: 3px solid blue;
	overflow: hidden;
	overflow-y: scroll;
	width: 300px;
	height: 200px;
	}
	#teleprompter li {
	margin: 5px 0;
	cursor: pointer;
	}
	.already-said {
	background-color: lightgreen;
	}
	</style>
	</head>
	<body>
	<h1>Teleprompter for google hangouts</h1>
	<h3>This is a prototype, expect this code to be thrown away</h3>
	<div id="teleprompter">
	<ul>
	<li>My name is Nick</li>
	<li>let's wait a minute</li>
	<li>votes from twitter</li>
	<li>
	why are we building this?
	<ul>
	<li>context</li>
	<li>technologies used</li>
	<li>problems ran into</li>
	</ul>
	</li>
	<li>
	coding execise
	<ul>
	<li>what language would you like to use?</li>
	<li>this is just one part of the overall process</li>
	<li>we're focused on completeness of the exercise</li>
	<li>we care about optimality but only a little</li>
	</ul>
	</li>
	<li>I had a great time</li>
	<li>I'm going to package this up</li>
	</ul>
	</div>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<script type="text/javascript">
	const tele = $("#teleprompter");
	function toggleSaid(e) {
	e.stopPropagation();
	const li = $(this);
	if (li.children("ul").length > 0) return;
	let shouldToggle = li.is(".already-said + li");
	if (!shouldToggle) {
	const isTopLevelOrNestedReady = li.parent().is("#teleprompter > ul")
	\|\| li.parent().parent().is(".already-said + li");
	if (isTopLevelOrNestedReady) {
	shouldToggle = shouldToggle \|\| li.is(":first-child()");
	}
	}
	if (!shouldToggle) return;
	li.toggleClass("already-said");
	if (li.parent().is("#teleprompter > ul")) return;
	const parentOff = li.siblings().not(".already-said").length > 0;
	li.parent().parent().toggleClass("already-said", !parentOff);
	}
	tele.on("click", "li", toggleSaid);
	tele.on("click")
	</script>
	<script type="text/javascript">
	const items = $("#teleprompter li")
	.map(function(li, el) {
	return {
	text: $(el).text().toLowerCase(),
	el: $(el)
	};
	})
	.toArray()
	.filter(str => str.text.charCodeAt(0) != 10);
	</script>
	<script type="text/javascript">
	var SpeechRecognition = SpeechRecognition \|\| webkitSpeechRecognition;
	var SpeechRecognitionEvent = SpeechRecognitionEvent \|\| webkitSpeechRecognitionEvent;
	var recognition = new SpeechRecognition();
	recognition.lang = 'en-US';
	recognition.interimResults = false;
	recognition.maxAlternatives = 1;
	recognition.onresult = function(event) {
	var last = event.results.length - 1;
	var text = event.results[last][0].transcript.toLowerCase();
	console.log(typeof(text));
	console.log('Result received: ' + text + '.');
	console.log('Confidence: ' + event.results[0][0].confidence);
	if (text.includes(items[0].text)) {
	items[0].el.trigger("click");
	items.shift();
	}
	}
	recognition.onspeechend = function() {
	console.log("stopping speach recognition");
	recognition.stop();
	}
	recognition.onnomatch = function(event) {
	console.log('I didnt recognise that color.');
	}
	recognition.onerror = function(event) {
	console.log('Error occurred in recognition: ' + event.error);
	}
	$("h1").on("click", function() {
	console.log('Ready to receive a color command.');
	recognition.start();
	});
	</script>
	</body>
	</html>