Created
December 4, 2019 14:47
-
-
Save ninjacarr/366fcf03ae9602b92bef5f5b26022e84 to your computer and use it in GitHub Desktop.
Voice controlled twister
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<style type="text/css"> | |
body { | |
margin: 0px; | |
} | |
#main { | |
width: 100%; | |
height: 100%; | |
position: relative; | |
} | |
#text { | |
text-align: center; | |
font-family: verdana; | |
font-weight: bold; | |
font-size: 40px; | |
position: absolute; | |
top: 50%; | |
width: 100%; | |
height: 100px; | |
margin-top: -50px; | |
} | |
.red { | |
background-color: red; | |
} | |
.blue { | |
background-color: blue; | |
} | |
.green { | |
background-color: green; | |
} | |
.yellow { | |
background-color: yellow; | |
} | |
</style> | |
<script type="text/javascript"> | |
// Milliseconds since last input before accepting a new one | |
var diff = 2000; | |
// Keyword to spin | |
var keyword = "spin"; | |
document.addEventListener("DOMContentLoaded", function() { | |
document.getElementById("text").innerHTML = | |
"Say " + keyword.toUpperCase() + "!"; | |
}); | |
var last = new Date(); | |
var bodyparts = ["RIGHT HAND", "LEFT HAND", "RIGHT FOOT", "LEFT FOOT"]; | |
var colors = ["blue", "red", "green", "yellow"]; | |
function spin() { | |
var bodypart = bodyparts[Math.floor(Math.random() * 4)]; | |
var color = colors[Math.floor(Math.random() * 4)]; | |
document.getElementById("main").className = color; | |
document.getElementById("text").innerHTML = bodypart; | |
speechSynthesis.speak( | |
new SpeechSynthesisUtterance(bodypart + ", " + color) | |
); | |
} | |
var recognition = new webkitSpeechRecognition(); | |
recognition.continuous = true; | |
recognition.interimResults = true; | |
recognition.onresult = function(event) { | |
if (event.results) { | |
Object.values(event.results).forEach(res => { | |
console.log(); | |
var alternative = res["0"]; | |
if ( | |
alternative && | |
alternative.confidence && | |
alternative.confidence >= 0.9 && | |
alternative.transcript && | |
alternative.transcript.trim() == keyword | |
) { | |
var now = new Date(); | |
if (now.getTime() - last.getTime() > diff) { | |
last = now; | |
spin(); | |
} | |
} | |
}); | |
} | |
}; | |
recognition.start(); | |
</script> | |
</head> | |
<body> | |
<div id="main"><div id="text"></div></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment