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. 3.
  2. 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';
  3. 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
  4. 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
  5. 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();
  6. 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() {};
  7. 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();
  8. 21.

    API Web Speech API 1 2 3 4 5 6

    7 8 9 10 11 12 13 11 recognition.onresult = function () {};
  9. 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 }
  10. 24.
  11. 26.

    QA

  12. 27.