Hey CodeDayers, this time my workshop is on voice driven web apps.  This might sound complicated, but thanks to Google’s speech recognition and voice synthesis software it’s actually really easy!  We’ll be building a knock knock joke app that both talks and listens for your response.  Check it out here: knock knock app

You will need to use Google Chrome for this, and it will ask you to allow use of microphone as it tells the joke and needs to listen for your response.

You can watch the slideshow here: https://docs.google.com/presentation/d/1-eybU8KgbJyRL3jEb8v6Dx0jZO3LagTTthVCppKmG2A/edit?usp=sharing

Full code:

'use strict';

const message = setupVoice();
const recognition = new webkitSpeechRecognition();

window.onload = () => {
	sayKnockKnock()
		.then(listenForUserSpeech)
		.then(respondToWhosThere)
		.then(listenForUserSpeech)
		.then(respondWithPunchline);
}

function setupVoice() {
	const message = new SpeechSynthesisUtterance();
	const voices = window.speechSynthesis.getVoices();
	message.voice = voices[2];
	message.volume = 1;  // 0 to 1
	message.rate = 1;	 // 0.1 to 10
	message.pitch = 1;   //0 to 2
	message.lang = 'en-US';
	return message;
}

function sayKnockKnock() {
	const promise = new Promise(resolve => message.onend = resolve);
	message.text = "Knock knock";
	speechSynthesis.speak(message);
	return promise;
}

function listenForUserSpeech() {
	const promise = new Promise(resolve => recognition.onresult = resolve);
	recognition.start();
	return promise;
}

function respondToWhosThere(event) {
	const promise = new Promise(resolve => message.onend = resolve);
	const spoken = event.results[0][0].transcript;
	const confidence = event.results[0][0].confidence;
	
	if (spoken == "who's there") {
		message.text = "cows go";
	} else if (confidence < 0.7) { message.text = "I couldn't really understand you so I'll say it for you, who's there. Cows go."; } else { message.text = "Silly human, don't you understand knock knock jokes? You're supposed to say who's there. Then I say, Cows go"; } speechSynthesis.speak(message); console.log(spoken, confidence); return promise; } function respondWithPunchline(event) { const promise = new Promise(resolve => message.onend = resolve);
	const spoken = event.results[0][0].transcript;
	const confidence = event.results[0][0].confidence;
	
	if (spoken == "cows go who" || spoken == "cows go moo" || spoken == "cows go home") {
		message.text = "No silly, cows go moo";
	} else if (confidence < 0.7) {
		message.text = "I still can't understand you so I'll say it for you, cows go who.  No silly, cows go moo.";
	} else {
		message.text = "You're really messing this joke up, you're supposed to say cows go who. Then I say, Cows go moo";
	}
	speechSynthesis.speak(message);
	console.log(spoken, confidence);
	return promise;
}