zengde/gist:75a4063c9c3cabda237e8dd650a36b61

## gistfile1.html
<html>
<head>
	<title>API Example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="https://cdn.jsdelivr.net/npm/jquery@2.1.1/dist/jquery.min.js"></script>
	<script type="text/javascript">
		var accessToken = "<Put Your Agent Access Token Here!>";
		var baseUrl = "https://api.api.ai/v1/";
		var synth;
		var conversation=[];
		$(document).ready(function() {
			$("#input").keypress(function(event) {
				if (event.which == 13) {
					event.preventDefault();
					send();
				}
			});
			$("#rec").click(function(event) {
				switchRecognition();
			});
			$("#speech").click(function(event) {
				setSpeechResponse(conversation[conversation.length - 1]);
				//setSpeechResponse('test');
			});
		});
		var recognition;
		function getVoices(){
			alert(synth.getVoices())
			setTimeout('getVoices',1000)
		}
		function startRecognition() {
			recognition = new webkitSpeechRecognition();
			recognition.onstart = function(event) {
				updateRec();
			};
			recognition.onresult = function(event) {
				var text = "";
			    for (var i = event.resultIndex; i < event.results.length; ++i) {
			    	text += event.results[i][0].transcript;
			    }
			    setInput(text);
				stopRecognition();
			};
			recognition.onend = function() {
				stopRecognition();
			};
			recognition.lang = "en-US";
			recognition.start();
		}

		function stopRecognition() {
			if (recognition) {
				recognition.stop();
				recognition = null;
			}
			updateRec();
		}
		function switchRecognition() {
			if (recognition) {
				stopRecognition();
			} else {
				startRecognition();
			}
		}
		function setInput(text) {
			$("#input").val(text);
			send();
		}
		function updateRec() {
			$("#rec").text(recognition ? "Stop" : "Speak");
		}
		function send() {
			var text = $("#input").val();
			conversation.push("Me: " + text + '\r\n');
			$.ajax({
				type: "POST",
				url: baseUrl + "query?v=20150910",
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				headers: {
					"Authorization": "Bearer " + accessToken
				},
				data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }),
				success: function(data) {
					//setResponse(JSON.stringify(data, undefined, 2));
					console.dir(data);
					var respText = data.result.fulfillment.speech;
					setResponse(respText);
					$("#response").scrollTop($("#response").height());
				},
				error: function() {
					setResponse("Internal Server Error");
				}
			});
			//setResponse("Loading...");
		}
		function setResponse(val) {
			conversation.push("AI: " + val + '\r\n');
			$("#response").text(conversation.join(""));
			setSpeechResponse(val);
		}

		function setSpeechResponse(val) {
			if(!val){
				return;
			}
			synth = window.speechSynthesis;
			var utterThis = new SpeechSynthesisUtterance(val);
			utterThis.lang = "en-US";
			synth.speak(utterThis);
		}
	</script>
	<style type="text/css">
		body { width: 500px; margin: 0 auto; text-align: center; margin-top: 20px; }
		div {  position: absolute; }
		input { width: 400px; }
		button { width: 50px; }
		textarea { width: 100%; }
	</style>
</head>
<body>
	<div>
		<input id="input" type="text"> <button id="rec">Speak</button><button id="speech">Speech</button>
		<br>Response<br> <textarea id="response" cols="40" rows="20"></textarea>
	</div>
</body>
</html>
	<html>
	<head>
	<title>API Example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="https://cdn.jsdelivr.net/npm/jquery@2.1.1/dist/jquery.min.js"></script>
	<script type="text/javascript">
	var accessToken = "<Put Your Agent Access Token Here!>";
	var baseUrl = "https://api.api.ai/v1/";
	var synth;
	var conversation=[];
	$(document).ready(function() {
	$("#input").keypress(function(event) {
	if (event.which == 13) {
	event.preventDefault();
	send();
	}
	});
	$("#rec").click(function(event) {
	switchRecognition();
	});
	$("#speech").click(function(event) {
	setSpeechResponse(conversation[conversation.length - 1]);
	//setSpeechResponse('test');
	});
	});
	var recognition;
	function getVoices(){
	alert(synth.getVoices())
	setTimeout('getVoices',1000)
	}
	function startRecognition() {
	recognition = new webkitSpeechRecognition();
	recognition.onstart = function(event) {
	updateRec();
	};
	recognition.onresult = function(event) {
	var text = "";
	for (var i = event.resultIndex; i < event.results.length; ++i) {
	text += event.results[i][0].transcript;
	}
	setInput(text);
	stopRecognition();
	};
	recognition.onend = function() {
	stopRecognition();
	};
	recognition.lang = "en-US";
	recognition.start();
	}

	function stopRecognition() {
	if (recognition) {
	recognition.stop();
	recognition = null;
	}
	updateRec();
	}
	function switchRecognition() {
	if (recognition) {
	stopRecognition();
	} else {
	startRecognition();
	}
	}
	function setInput(text) {
	$("#input").val(text);
	send();
	}
	function updateRec() {
	$("#rec").text(recognition ? "Stop" : "Speak");
	}
	function send() {
	var text = $("#input").val();
	conversation.push("Me: " + text + '\r\n');
	$.ajax({
	type: "POST",
	url: baseUrl + "query?v=20150910",
	contentType: "application/json; charset=utf-8",
	dataType: "json",
	headers: {
	"Authorization": "Bearer " + accessToken
	},
	data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }),
	success: function(data) {
	//setResponse(JSON.stringify(data, undefined, 2));
	console.dir(data);
	var respText = data.result.fulfillment.speech;
	setResponse(respText);
	$("#response").scrollTop($("#response").height());
	},
	error: function() {
	setResponse("Internal Server Error");
	}
	});
	//setResponse("Loading...");
	}
	function setResponse(val) {
	conversation.push("AI: " + val + '\r\n');
	$("#response").text(conversation.join(""));
	setSpeechResponse(val);
	}

	function setSpeechResponse(val) {
	if(!val){
	return;
	}
	synth = window.speechSynthesis;
	var utterThis = new SpeechSynthesisUtterance(val);
	utterThis.lang = "en-US";
	synth.speak(utterThis);
	}
	</script>
	<style type="text/css">
	body { width: 500px; margin: 0 auto; text-align: center; margin-top: 20px; }
	div { position: absolute; }
	input { width: 400px; }
	button { width: 50px; }
	textarea { width: 100%; }
	</style>
	</head>
	<body>
	<div>
	<input id="input" type="text"> <button id="rec">Speak</button><button id="speech">Speech</button>
	<br>Response<br> <textarea id="response" cols="40" rows="20"></textarea>
	</div>
	</body>
	</html>