Web Speech Api
by Javi Perez
La Plata Js

05/2016
Why speech?
Natural
Hands Free
No screen needed
No keyboard
No mouse
Magic - action at a distance

talk is cheap
It’s easy, almost effortless
Our preferred way of communicating
In fact, we love to do it all the time
Some of us can’t stop
The easiest form of work
One of the first things you learn
and probably the last thing you will do

ease of use
voice allows zero-click interface
effortless
No clicking, no typing, just say the magic words
No reading, just listen

voice commands
Very hard to do well
Frustrating for users
To reduce errors, we have to limit vocabulary
The user has to know or guess the available commands
Big penalty for getting a command wrong
Errors in speech recognition cannot be avoided
User errors are also unavoidable

error correction
command line
- up arrow
- arrow left
- type over the error
- submit

voice
- repeat entire command until it is recognized
Web Speech Recognition Api
Now we can talk and get a transcript

Web Speech Recognition Api
Security notes
- Pages hosted on HTTP need to ask permission each time they want to make an audio capture.
- Pages on HTTPS do not have to repeatedly request access.
- Previously authorised application can record audio without let you know.
- All of the data is going to remote server and you can't know if somebody is listening.
Web Speech Synthesis Api
Now the browser can speak for you

play time!

Libraries & Tools
annyang! SpeechRecognition that just works
annyang is a tiny javascript library that lets your visitors control your site with voice commands.
<voice elements>
A COUPLE OF WEB COMPONENTS THAT CAN DO
AMAZING STUFF USING THE WEB SPEECH API
http://zenorocha.github.io/voice-elements/#recognition-element
Demos
- https://www.google.com/intl/en/chrome/demos/speech.html
- https://www.audero.it/demo/web-speech-api-demo.html
- https://www.peanutgalleryfilms.com
Speech Synthesis Demo
- http://codepen.io/matt-west/pen/wGzuJ
Browser Support

Browser Support

Want to know more?
- http://shapeshed.com/html5-speech-recognition-api/
- https://dvcs.w3.org/hg/speech-api/raw-file/9a0075d25326/speechapi.html
- https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
Keep in touch and ask for help

Recommended links
Web Speech Api
By Javier Perez
Web Speech Api
- 694