Crossing the streams

Crossing the streamsCSUN 2016

1

Every molecule in your body exploding at the speed of light?

2

Vibration APIW3C Recommendation (2015)

[twitter].@W3C Vibration API https://www.w3.org/TR/vibration/ #CSUN16[/twitter]3

What?Enables simple haptic feedback for webapps

4

Why?Email alert notificationsGame effectsRTC incoming call notifications

5

Where?Chrome on AndroidChrome, Firefox and Opera on desktop

[twitter]Can I use the Vibration API? http://caniuse.com/#feat=vibration #CSUN16[/twitter]6

How?Patterns of on/off pulsesEach pulse is described in millisecondsPatterns are a combination of pulses/pauses

7

Single pulsewindow.navigator.vibrate(100);window.navigator([100]);

8

Pulse patternswindow.navigator.vibrate([200, 100, 200]);

9

Cancelling pulseswindow.navigator.vibrate(0);window.navigator.vibrate([0]);

10

Vibration API demoLjwatson.github.io/playground/vibrate/vibrate.html

[twitter]Vibration API demo http://ljwatson.github.io/playground/vibrate/vibrate.html #CSUN16[/twitter]11

Check for API support if ("vibrate" in navigator) {//Do something. } else { alert("This browser does not support the Vibration API"); }

12

Vibrate once var vibrateOnce = function(e) {window.navigator.vibrate(500); vibrateVisualiser(500); };

Vibrate twice var vibrateTwice = function(e) {window.navigator.vibrate([500, 500, 500]);vibrateVisualiser([500, 500, 500]);};

14

Vibrate more var vibrateMore = function(e) {window.navigator.vibrate([500, 500, 500, 500, 500]);vibrateVisualiser([500, 500, 500, 500, 500]);};

Add event listenersdocument.getElementById("v1").addEventListener("click", vibrateOnce);document.getElementById("v2").addEventListener("click", vibrateTwice);document.getElementById("v3").addEventListener("click", vibrateMore);

Vibration API in action

Web Speech APIW3CCG proposal (2012)

[twitter].@W3C CG Web Speech API https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html #CSUN16[/twitter]18

What?Enables speech input and output for webapps

19

Why?Ask calendar for today's appointmentsGet help with complex interfacesHands-free recipe books

20

How?SpeechSynthesis and SpeechRecognition interfacesMethods for controlling and manipulating speech output/input

SpeechSynthesis interface

Where?Chrome, Opera and Safari on desktopChrome and Safari on mobile

[twitter]Can I use the Web Speech API? SpeechSynthesis http://caniuse.com/#feat=speech-synthesis SpeechRecognition http://caniuse.com/#feat=speech-recognition #CSUN[/twitter]

23

SpeechSynthesis demohttp://ljwatson.github.io/playground/speech/speak.html

[twitter]Web Speech API demo http://ljwatson.github.io/playground/speech/speak.html #CSUN16[/twitter]24

Check for API supportif (window.SpeechSynthesisUtterance === undefined) {alert("This browser does not support the Web Speech API");} else {//Do something.}

Create speech objectvar utterance = new SpeechSynthesisUtterance();utterance.text = "Tequila";

Speak utterance window.speechSynthesis.speak(utterance);

SpeechSynthesis in action

SpeechSynthesis voices demohttp://ljwatson.github.io/playground/speech/getvoices.html

[twitter]Web Speech API voices demo http://ljwatson.github.io/playground/speech/speak.html #CSUN16[/twitter]29

Get voicesvar tts = speechSynthesis.getVoices();

30

Display voices var voices = document.getElementById("voices"); for (var i = 0; i < tts.length; i++) {voices.innerHTML += '' + tts[i].name + '';}

31

Select voicevar selectedVoice = voices.selectedIndex;var utterance = new SpeechSynthesisUtterance();utterance.text = voices[selectedVoice].text;

32

Assign voice to speech object utterance.voice = tts[selectedVoice]; window.speechSynthesis.speak(utterance);

33

SpeechSynthesis voices in action

SpeechRecognition interface

WhereChrome and Opera on the desktopChrome on Android

SpeechRecognition demogoogle.com/intl/en/chrome/demos/speech.html

SpeechRecognition in action

CSS Speech moduleW3C Candidate Recommendation (2012)

[twitter].@W3C CSS Speech module https://www.w3.org/TR/css3-speech/ #CSUN16[/twitter]39

What?Enables aural presentation of content

40

Why?Speak news headlines in a different voiceRaise volume for important email notificationsSpeak terms and conditions more quickly

41

Where?Safari with VoiceOver on iOS

42

How?Use CSS to enable/disable speechControl volume, pitch and rate

Speak propertyDetermines whether content is presented aurallyspeak: auto;

Valuesauto, normal, none

44

Voice-volume propertyDetermines volume of voice outputvoice-volume: medium;

Values:silent, x-soft, soft, medium, loud, x-loud

Voice-rate propertyDetermines speaking ratevoice-rate: normal;

Values:normal, x-slow, slow, medium, fast, x-fast

46

Voice-pitch propertyDetermines the baseline voice pitchvoice-pitch: medium;

Values:x-low, low, medium, high, x-high

47

Voice-range propertyDetermines the variability in the baseline voice pitchvoice-range: medium;

Values:x-low, low, medium, high, x-high

48

Voice-stress propertyDetermines voice emphasis (a combination of pitch, volume and rate changes)voice-stress: normal;

Values:normal, strong, none, moderate, reduced

49

CSS Speech demohttp://ljwatson.github.io/playground/speech/speak.html

[twitter]CSS Speech emulator with Web Speech API http://ljwatson.github.io/playground/speech/speak.html #CSUN16[/twitter]50

CSS Speech in action

Thank youLjwatson.github.io/playground