Talking Web Apps

Talking Web Apps

Talking about Web Speech in web applications, and a small demo giving Twitter a Speech interface (https://github.com/orlando/twitter-speech)

A0574e5093df6afd68f1c109c5a9bf22?s=128

Orlando Del Aguila

February 23, 2016
Tweet

Transcript

  1. Talking web apps

  2. Orlando Del Aguila

  3. None
  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