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)

Transcript

1. Talking
   web
   apps
   

   View Slide

2. Orlando
   Del Aguila
   

   View Slide

3. View Slide

4. @eatcodetravel
   eatcodetravel.com
   hashlabs.com
   

   View Slide

5. Talking
   web
   apps
   

   View Slide

6. Speech Synthesis API
   Web Speech API
   

   View Slide

7. Speech Synthesis API
   Web Speech API
   

   View Slide

8. Support
   Speech Synthesis
   

   View Slide

9. API
   Speech Synthesis
   Volume
   Rate
   Pitch
   Language
   Voice
   

   View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

15. Speech Synthesis API
    DEMO
    

    View Slide

16. Speech Synthesis API
    Web Speech API
    

    View Slide

17. Support
    Web Speech API
    

    View Slide

18. API
    Language
    Continuous
    InterimResults
    Web Speech API
    

    View Slide

19. API
    onstart
    onend
    onresults
    onerror
    Web Speech API
    

    View Slide

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

    View Slide

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

    View Slide

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 }
    

    View Slide

23. Web Speech API
    DEMO
    

    View Slide

24. Resources
    

    View Slide

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

    View Slide

26. QA
    

    View Slide

27. Thanks
    

    View Slide