Talking web apps 

Orlando Del Aguila 

No content

@eatcodetravel eatcodetravel.com hashlabs.com 

Talking web apps 

Speech Synthesis API Web Speech API 

Speech Synthesis API Web Speech API 

Support Speech Synthesis 

API Speech Synthesis Volume Rate Pitch Language Voice 

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'; 

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 

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 

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(); 

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() {}; 

Speech Synthesis API DEMO 

Speech Synthesis API Web Speech API 

Support Web Speech API 

API Language Continuous InterimResults Web Speech API 

API onstart onend onresults onerror Web Speech API 

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(); 

API Web Speech API 1 2 3 4 5 6 7 8 9 10 11 12 13 11 recognition.onresult = function () {}; 

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 } 

Web Speech API DEMO 

Resources 

Web apps that talk Voice driven apps MDN Web Speech API Web Speech API Spec 

QA 

Thanks