Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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)

Orlando Del Aguila

February 23, 2016
Tweet

More Decks by Orlando Del Aguila

Other Decks in Programming

Transcript

  1. Talking
    web
    apps

    View full-size slide

  2. Orlando
    Del Aguila

    View full-size slide

  3. @eatcodetravel
    eatcodetravel.com
    hashlabs.com

    View full-size slide

  4. Talking
    web
    apps

    View full-size slide

  5. Speech Synthesis API
    Web Speech API

    View full-size slide

  6. Speech Synthesis API
    Web Speech API

    View full-size slide

  7. Support
    Speech Synthesis

    View full-size slide

  8. API
    Speech Synthesis
    Volume
    Rate
    Pitch
    Language
    Voice

    View full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. Speech Synthesis API
    DEMO

    View full-size slide

  15. Speech Synthesis API
    Web Speech API

    View full-size slide

  16. Support
    Web Speech API

    View full-size slide

  17. API
    Language
    Continuous
    InterimResults
    Web Speech API

    View full-size slide

  18. API
    onstart
    onend
    onresults
    onerror
    Web Speech API

    View full-size slide

  19. 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 full-size slide

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

    View full-size slide

  21. 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 full-size slide

  22. Web Speech API
    DEMO

    View full-size slide

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

    View full-size slide