speech-input v1

Daniel-Hug · Apr 22, 2014 · 7e44628 · 7e44628
1 parent 047663d
commit 7e44628
Show file tree

Hide file tree

Showing 10 changed files with 235 additions and 404 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,20 @@
+{
+	"browser": true,
+	"devel": true,
+	"eqnull": true,
+	"camelcase": true,
+	"eqeqeq": true,
+	"freeze": true,
+	"immed": true,
+	"indent": 4,
+	"latedef": true,
+	"newcap": true,
+	"nonbsp": true,
+	"noarg": true,
+	"nonew": true,
+	"quotmark": "single",
+	"undef": true,
+	"unused": true,
+	"strict": true,
+	"trailing": true
+}
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -0,0 +1,29 @@
+speech-input
+============
+
+Simple speech input for `<input>`s —replaces deprecated `x-webkit-speech` attribute
+
+Use:
+----
+
+Include **speech-input.css** in the `<head></head>` element:
+
+```
+<link rel="stylesheet" href="speech-input.css">
+```
+
+Include **speech-input.js** just before the closing `</body>` tag:
+
+```
+<script src="speech-input.js"></script>
+```
+
+Wrap your input field in a `<div>` with a `speech-input-wrapper` class:
+
+```
+<div class="speech-input-wrapper"><input type="text"></div>
+```
+
+And you're done! The input field should look like this now:
+
+![speech-input demo](http://f.cl.ly/items/3m0n2Q0y0h1a0N2P2s0Y/screenshot-by-nimbus.png)
diff --git a/demo.html b/demo.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<title>Simple speech input for &lt;input&gt;s —replaces deprecated x-webkit-speech attribute</title>
+<link rel="stylesheet" href="speech-input.css">
+<style>
+.speech-input-wrapper input {
+	font-size: 2em;
+	padding: .1em;
+}
+</style>
+
+<div class="speech-input-wrapper"><input type="text"></div>
+
+<script src="speech-input.js"></script>
diff --git a/speech-input.css b/speech-input.css
@@ -0,0 +1,93 @@
+.speech-input-wrapper {
+	display: inline-block;
+	position: relative;
+}
+
+.speech-input-wrapper input {
+	margin: 0;
+}
+
+.speech-input-wrapper button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	height: 18px;
+	width: 18px;
+	margin: 0;
+	border: 0;
+	padding: 0;
+	background: none;
+}
+
+.icon > .mic,
+.icon > .mic:after,
+.icon > .holder,
+.icon > .holder:before,
+.icon > .holder:after {
+	position: absolute;
+	background: #333;
+}
+
+/* Microphone */
+.icon > .mic {
+	display: block;
+	height: 25%; /* 8px / 32px */
+	top: 9.375%; /* 3px / 32px */
+	left: 37.5%; /* 12px / 32px */
+	right: 37.5%; /* 12px / 32px */
+	-webkit-border-radius: 99px 99px 0 0;
+	-moz-border-radius: 99px 99px 0 0;
+	border-radius: 99px 99px 0 0;
+}
+
+.icon > .mic:before,
+.icon > .mic:after,
+.icon > .holder {
+	-webkit-border-radius: 0 0 99px 99px;
+	-moz-border-radius: 0 0 99px 99px;
+	border-radius: 0 0 99px 99px;
+}
+
+.icon > .mic:before {
+	position: absolute;
+	z-index: 1;
+	content: '';
+	width: 150%; /* 12px / 8px */
+	height: 137.5%; /* 11px / 8px */
+	top: 100%; /* 8px / 8px */
+	left: -25%; /* -2px / 8px */
+	background: #fff;
+}
+
+.icon > .mic:after {
+	z-index: 1;
+	content: '';
+	width: 100%; /* 10px / 10px */
+	height: 100%; /* 10px / 10px */
+	top: 110%; /* 11px / 10px */
+	left: 0;
+}
+
+.icon > .holder {
+	display: block;
+	height: 40.625%; /* 13px / 32px */
+	width: 50%; /* 16px / 32px */
+	left: 25%; /* 8px / 32px */
+	top: 37.5%; /* 12px / 32px */
+}
+
+.icon > .holder:after {
+	content: '';
+	width: 66.666%; /* 8px / 16px */
+	height: 18.182%; /* 2px / 13px */
+	bottom: -30.769%; /* -4px / 13px */
+	left: 16.667%; /* 2px / 16px */
+}
+
+.icon > .holder:before {
+	content: '';
+	width: 33.333%; /* 4px / 16px */
+	height: 27.273%; /* 3px / 13px */
+	top: 92.308%; /* 12px / 13px */
+	left: 33.333%; /* 4px / 16px */
+}
diff --git a/speech-input.js b/speech-input.js
@@ -0,0 +1,78 @@
+/*global webkitSpeechRecognition */
+
+(function() {
+	'use strict';
+
+	if (! ('webkitSpeechRecognition' in window) ) return;
+
+	function capitalize(str) {
+		return str.length ? str[0].toUpperCase() + str.slice(1) : str;
+	}
+
+	var speechInputWrappers = document.getElementsByClassName('speech-input-wrapper');
+
+	[].forEach.call(speechInputWrappers, function(speechInputWrapper) {
+		var finalTranscript = '';
+		var recognizing = false;
+		var ignoreOnEnd;
+		var inputEl = speechInputWrapper.firstElementChild;
+		var micBtn = document.createElement('button');
+		//var micImg = document.createElement('img');
+		var micIcon = document.createElement('span');
+		var holderIcon = document.createElement('span');
+		micBtn.className = 'icon';
+		micIcon.className = 'mic';
+		holderIcon.className = 'holder';
+		//micImg.src = 'mic.gif';
+		micBtn.appendChild(micIcon);
+		micBtn.appendChild(holderIcon);
+		var inputHeight = inputEl.offsetHeight;
+		var inputRightBorder = parseInt(getComputedStyle(inputEl).borderRightWidth, 10);
+		var buttonSize = 0.8 * inputHeight;
+		micBtn.style.top = 0.1 * inputHeight + 'px';
+		micBtn.style.height = micBtn.style.width = buttonSize + 'px';
+		inputEl.style.paddingRight = buttonSize - inputRightBorder + 'px';
+		speechInputWrapper.appendChild(micBtn);
+		var recognition = new webkitSpeechRecognition();
+		recognition.continuous = true;
+
+		recognition.onstart = function() {
+			recognizing = true;
+			micBtn.classList.add('listening');
+		};
+
+		recognition.onerror = function(event) {
+			console.log(event.error);
+			ignoreOnEnd = true;
+		};
+
+		recognition.onend = function() {
+			recognizing = false;
+			if (ignoreOnEnd) return;
+			micBtn.classList.remove('listening');
+		};
+
+		recognition.onresult = function(event) {
+			for (var i = event.resultIndex; i < event.results.length; ++i) {
+				if (event.results[i].isFinal) {
+					finalTranscript += event.results[i][0].transcript;
+				}
+			}
+			finalTranscript = capitalize(finalTranscript);
+			inputEl.value = finalTranscript;
+		};
+
+		micBtn.addEventListener('click', function(event) {
+			event.preventDefault();
+			if (recognizing) {
+				recognition.stop();
+				return;
+			}
+			finalTranscript = '';
+			recognition.start();
+			ignoreOnEnd = false;
+			inputEl.value = '';
+			//micImg.src = 'mic-slash.gif';
+		}, false);
+	});
+})();
diff --git a/webspeechdemo/mic-animate.gif b/webspeechdemo/mic-animate.gif
diff --git a/webspeechdemo/mic-slash.gif b/webspeechdemo/mic-slash.gif
diff --git a/webspeechdemo/mic.gif b/webspeechdemo/mic.gif