View
708
Download
0
Category
Preview:
Citation preview
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
Recommended