OK Computer

Front End London, 29/01/15

Peter Gasston

@stopsatgreen

broken-links.com

Input Types

Touch: Manipulate space

Keyboard: Data entry

Voice: Command or query

55% of teens

41% of adults

use voice search every day*

*maybe

10% of Baidu

search queries are by voice

That’s ~500m per day

Synthesis

Chrome/Safari


var txt = 'Hello world',
	say = new SpeechSynthesisUtterance(txt);
window.speechSynthesis.speak(say);
					

SSU Attributes


var txt = 'Hello world',
    say = new SpeechSynthesisUtterance(txt);
say.lang = 'en-GB';
say.pitch = 0.75;
say.rate = 1.5;
say.volume = 0.5;
window.speechSynthesis.speak(say);
					

Methods, Attrs, Events

Play / Pause / Resume /
Cancel / End / Error

Synthesis As A Service

  1. developer.att.com/apis/speech
  2. ws.neospeech.com/
  3. cereproc.com/en/products/cloud
  4. ivona.com/en/for-business/speech-cloud/

Neospeech

SSML



Hello FEL. This is SSML

Recognition

Challenges

  1. Multiple users
  2. Multiple languages
  3. Accents

Web Speech API


						var recog = new SpeechRecognition();
					

x-browser


var speechRecognition = (
	window.SpeechRecognition ||
	window.webkitSpeechRecognition
);
var recog = new speechRecognition();
					

SpeechRecognition Methods


var recog = new SpeechRecognition();
recog.start();
recog.stop();
recog.abort();
					

SpeechRecognition Events


var recog = new SpeechRecognition();
recog.onresult = function () {};
recog.onnomatch = function () {};
recog.onerror = function () {};
					

MVS


var recog = new SpeechRecognition();
recog.onresult = function (result) {
	output.textContent = results[0][0].transcript;
};
btn.onclick = recog.start();
					

Click header for demo

SpeechRecognition Events

  1. start
  2. audiostart
  3. soundstart
  4. speechstart
  5. speechend
  6. soundend
  7. audioend
  8. end

Click header for demo

Interim Results


var recog = new SpeechRecognition();
recog.interimResults = true;
					

recog.onresult = function (result) {
	if (result.results[0].isFinal) {…}
};
btn.onclick = recog.start();
					

Click header for demo

Continuous


var recog = new SpeechRecognition();
recog.continuous = true;
recog.onresult = function (result) {
	output.textContent = result.results[0][0].transcript;
};
					

btn.onclick = function () {
	if (listening) { recog.stop(); }
	else { recog.start(); }
}
					

SpeechRTC +

Web Speech API

Tea. Earl Grey. Hot.

[Google demo]

JuliusJS


var recog = new Julius();
recog.onrecognition = function (result) {
	console.log(result);
}
					

Wit + Node

  1. Web Speech API + text
  2. Direct speech: GuM, Web Audio API

Wit.ai

Microphone.js

[Wit dashboard demo]

Wit.ai

Response

Use Cases

No screen

Busy hands

Amazon : ‘Alexa’

Apple : Siri

Google : Voice Search

Microsoft : Cortana

Closed Systems :(

The End

Thanks for your patience.

Copyright Note

The video clips in this presentation from the films Moon, Star Trek: The Voyage Home, Her, Star Trek, and 2001: A Space Odyssey belong to their respective copyright holders and are used here without permission.