Talking Web Apps by @odelaguila

Slides de la décima sesión de GDLJS del 23 de Febrero
Talking web apps

Transcript

1. Talking web apps
2. Orlando Del Aguila
4. @eatcodetravel eatcodetravel.com hashlabs.com
5. Talking web apps
6. Speech Synthesis API Web Speech API
7. Speech Synthesis API Web Speech API
8. Support Speech Synthesis
9. API Speech Synthesis Volume Rate Pitch Language Voice
10. API Speech Synthesis 1 var msg, voices; 2 msg = new SpeechSynthesisUtterance(); 3 voices = window.speechSynthesis.getVoices(); 4 5 // some voices don't support altering params 6 msg.voice = voices[10]; 7 msg.voiceURI = 'native'; 8 msg.volume = 1; // 0 to 1 9 msg.rate = 1; // 0.1 to 10 10 msg.pitch = 2; //0 to 2 11 msg.text = 'Hello World'; 12 msg.lang = 'en-US';
11. API Speech Synthesis 1 var msg, voices; 2 msg = new SpeechSynthesisUtterance(); 3 voices = window.speechSynthesis.getVoices(); 4 5 6 7 8 9 10 11 12 13
12. API Speech Synthesis 4 5 // some voices don't support altering params 6 msg.voice = voices[10]; 7 msg.voiceURI = 'native'; 8 msg.volume = 1; // 0 to 1 9 msg.rate = 1; // 0.1 to 10 10 msg.pitch = 1; //0 to 2 11 msg.text = 'Hello World'; 12 msg.lang = ‘en-US'; 13 speechSynthesis.speak(msg); 1 2 3
13. API Speech Synthesis 1 // speechSynthesis has a queue, 2 // and you don't need to worry about it. 3 speechSynthesis.speak(msg); 4 speechSynthesis.cancel(); 5 speechSynthesis.pause(); 6 speechSynthesis.resume();
14. API Speech Synthesis 1 // SpeechSynthesisUtterance has events 2 var msg = new SpeechSynthesisUtterance(); 3 4 msg.onstart = function onstart() {}; 5 msg.onend = function onend() {}; 6 msg.onerror = function onerror() {}; 7 msg.onpause = function onpause() {}; 8 msg.onboundary = function onboundary() {};
15. Speech Synthesis API DEMO
16. Speech Synthesis API Web Speech API
17. Support Web Speech API
18. API Language Continuous InterimResults Web Speech API
19. API onstart onend onresults onerror Web Speech API
20. API Web Speech API 1 // notice the webkit prefix 2 var recognition; 3 recognition = new webkitSpeechRecognition(); 4 recognition.lang = 'es-VE'; 5 recognition.continuous = true; 6 recognition.interimResults = false; 7 8 // Events 9 recognition.onstart = function () {}; 10 recognition.onend = function () {}; 11 recognition.onresult = function () {}; 12 recognition.onerror = function () {}; 13 recognition.start();
21. API Web Speech API 1 2 3 4 5 6 7 8 9 10 11 12 13 11 recognition.onresult = function () {};
22. API Web Speech API 1 recognition.onresult = function (event) { 2 var length, transcript, msg; 3 length = event.results.length - 1; 4 transcript = event.results[length][0].transcript; 5 transcript = transcript.trim(); 6 7 console.log(transcript); 8 9 msg = new SpeechSynthesisUtterance(message); 10 msg.text = message; 11 window.speechSynthesis.speak(msg); 12 }
23. Web Speech API DEMO
24. Resources
25. Web apps that talk Voice driven apps MDN Web Speech API Web Speech API Spec
26. QA
27. Thanks