jeremybenaim · December 12, 2012 17:41
diff --git a/speech-input-demo.html b/speech-input-demo.html
 <!doctype html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Webkit speech-input demo</title>
 	<link rel="stylesheet" href="http://jeremybenaim.com/css/style.css">
 	<style>
 		body{padding:10px 15px; font:normal 24px/1.5 Arial, Helvetica; color:#444}

 		input{font-size:24px; padding:3px 5px}

 		h1 {font-size:32px; margin: 0}
 		h3 {font-size:24px; margin: 0}

 		p{margin: 0 0 10px}
 		em{padding-left: 5px; color:#999}
 		ul{list-style: none; padding: 0; margin: 0}

 		.back a,
 		.back em{font-size: 14px; color: #999; text-decoration: none; padding: 0}
 		.back em{color: #444;}

 		.error{display:block; padding:15px; background:salmon; color:white; margin-bottom:15px}
 		.hidden{display:none}
 	</style>
 </head>
 <body>

 	<p class="back">
 		<a href="http://jeremybenaim.com/blog/webkit-speech-input.html">&lt;  back to the well written article</a> <em>or</em>  <a href="https://gist.github.com/4269906">grab the code here</a>
 	</p>

 	<p class="not-supported hidden">Ooh no! Your browser doesn't support this feature (well, actually, no one except Chrome does..)</p>

 	<p>
 		<select id="lang">
 			<option value="en" selected>English</option>
 			<option value="fr">Français</option>
      <option value="es">Español</option>
 		</select>
 	</p>

 	<p>
 		<input type="text" id="speechInput" placeholder="Say, say, say..." x-webkit-speech lang="en" />
 	</p>

 	<header class="hidden">
 		<h1>We heard:<em id="whatWeHeard"></em></h1>
 		<h3>But maybe what you said was:</h3>
 	</header>

 	<ul id="suggestions"></ul>

 	<script>
 		if (document.createElement('input').webkitSpeech == undefined) {
 			// a.k.a. your browser sucks
 			document.querySelector('.not-supported').className = 'not-supported error';
 		} else {
 			
 			// yay you're using Chrome, let's use a lot of js function that IE doesn't understand! \o/			

 			// webkitspeechinput handler
 			function whatyousaid (e) {
 				var suggestionsElm = document.getElementById('suggestions'),
 				 	whatWeHeard = document.getElementById('whatWeHeard'),
 					suggestionsArr = [], suggestionsFrag, i;

 				// empty suggestions
 				while (suggestionsElm.firstChild) {
 					suggestionsElm.removeChild(suggestionsElm.firstChild);
 				}

 				// what we heard (best results)
 				whatWeHeard.innerHTML = e.results[0].utterance; // which is == to suggestionsElm.value

 				// push suggestions results to an array
 				for (i in e.results) {
 					if (e.results.hasOwnProperty(i) && i >0) {
 						suggestionsArr.push(e.results[i].utterance);
 					}
 				}

 				// create suggestions list
 				suggestionsFrag = document.createDocumentFragment();
 				suggestionsArr.forEach(function (e) {
 					var li = document.createElement('li'), em = document.createElement('em');
 					em.textContent = e;
 					li.appendChild(em);
 					suggestionsFrag.appendChild(li);
 				});

 				suggestionsElm.appendChild(suggestionsFrag);

 				// show header
 				document.querySelector('header').removeAttribute('class');
 			}

 			// helpful to test w/ other language
 			function changeLang (e) {
 				document.getElementById('speechInput').setAttribute('lang', e.target.value)
 			}

 			// let's add event listener
 			document.getElementById('speechInput').addEventListener('webkitspeechchange', whatyousaid, false);
 			document.getElementById('lang').addEventListener('change', changeLang, false);
 		}
 	</script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Webkit speech-input demo</title>
	<link rel="stylesheet" href="http://jeremybenaim.com/css/style.css">
	<style>
	body{padding:10px 15px; font:normal 24px/1.5 Arial, Helvetica; color:#444}

	input{font-size:24px; padding:3px 5px}

	h1 {font-size:32px; margin: 0}
	h3 {font-size:24px; margin: 0}

	p{margin: 0 0 10px}
	em{padding-left: 5px; color:#999}
	ul{list-style: none; padding: 0; margin: 0}

	.back a,
	.back em{font-size: 14px; color: #999; text-decoration: none; padding: 0}
	.back em{color: #444;}

	.error{display:block; padding:15px; background:salmon; color:white; margin-bottom:15px}
	.hidden{display:none}
	</style>
	</head>
	<body>

	<p class="back">
	<a href="http://jeremybenaim.com/blog/webkit-speech-input.html">< back to the well written article</a> <em>or</em> <a href="https://gist.github.com/4269906">grab the code here</a>
	</p>

	<p class="not-supported hidden">Ooh no! Your browser doesn't support this feature (well, actually, no one except Chrome does..)</p>

	<p>
	<select id="lang">
	<option value="en" selected>English</option>
	<option value="fr">Français</option>
	<option value="es">Español</option>
	</select>
	</p>

	<p>
	<input type="text" id="speechInput" placeholder="Say, say, say..." x-webkit-speech lang="en" />
	</p>

	<header class="hidden">
	<h1>We heard:<em id="whatWeHeard"></em></h1>
	<h3>But maybe what you said was:</h3>
	</header>

	<ul id="suggestions"></ul>

	<script>
	if (document.createElement('input').webkitSpeech == undefined) {
	// a.k.a. your browser sucks
	document.querySelector('.not-supported').className = 'not-supported error';
	} else {

	// yay you're using Chrome, let's use a lot of js function that IE doesn't understand! \o/

	// webkitspeechinput handler
	function whatyousaid (e) {
	var suggestionsElm = document.getElementById('suggestions'),
	whatWeHeard = document.getElementById('whatWeHeard'),
	suggestionsArr = [], suggestionsFrag, i;

	// empty suggestions
	while (suggestionsElm.firstChild) {
	suggestionsElm.removeChild(suggestionsElm.firstChild);
	}

	// what we heard (best results)
	whatWeHeard.innerHTML = e.results[0].utterance; // which is == to suggestionsElm.value

	// push suggestions results to an array
	for (i in e.results) {
	if (e.results.hasOwnProperty(i) && i >0) {
	suggestionsArr.push(e.results[i].utterance);
	}
	}

	// create suggestions list
	suggestionsFrag = document.createDocumentFragment();
	suggestionsArr.forEach(function (e) {
	var li = document.createElement('li'), em = document.createElement('em');
	em.textContent = e;
	li.appendChild(em);
	suggestionsFrag.appendChild(li);
	});

	suggestionsElm.appendChild(suggestionsFrag);

	// show header
	document.querySelector('header').removeAttribute('class');
	}

	// helpful to test w/ other language
	function changeLang (e) {
	document.getElementById('speechInput').setAttribute('lang', e.target.value)
	}

	// let's add event listener
	document.getElementById('speechInput').addEventListener('webkitspeechchange', whatyousaid, false);
	document.getElementById('lang').addEventListener('change', changeLang, false);
	}
	</script>
	</body>
	</html>