JSFiddle - React, Tailwind, and code Playground

by TeslaVector

HTML

<html>
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/addons/p5.dom.js"></script>
	<script async>

	var target = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m','0','1','2','3','4','5','6','7','8','9',',','.','?','!','@'];
	// decipher key press codes
	var string = '';
	function showPress(evt) {
		if (evt) {
			var charCode = (evt.charCode) ? evt.charCode : evt.keyCode;
			if (target.indexOf(String.fromCharCode(charCode)) != -1 || evt.which == 32 || evt.which == 37){

				string = String.fromCharCode(charCode);
				
				var synth = window.speechSynthesis;
				var utterance = new SpeechSynthesisUtterance()
        
				utterance.rate = 1.5;

				utterance.text = string;

				synth.speak(utterance);
			}
		}
	}

			  		  
	// set page-wide event listeners
	document.onkeypress = showPress;

</script>
<style>
	form{
		margin: 200px auto;
		text-align: center;
	}
	
	input{
		width: 250px;
		height: 40px;
		font-size: 15px;
		text-align: center;
		border: 3px solid #444555;
	}
</style>
</head>
<body>
	<form>
		<input type="text" placeholder="type 'My name is John' (FAST)">
	</form>
</body>
</html>