jeremybenaim/speech-input-demo.html

## 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>