web Speech APi

JavaScript - TechSjokk 2013-09-25

Created and presented by Sebastian Schöld

No custom JavaScript

During the presentation I had a slide deck with some custom JavaScript to illustrate examples. This slide deck does not contain these. Everything else should be the same.

In the future I might come back and add the custom JavaScripts to this slide deck.

Who?

Why Speech recognition?




What is web Speech API?


  • Speech recognition
  • Speech synthesis

Web Speech API - W3c Specification

  • generate text-to-speech output
  • use speech recognition as input for forms
  • continuous dictation
  • control interface for browser

Browser Support?

var root = this;
var speechRecognition = root.webkitSpeechRecognition ||
                        root.mozSpeechRecognition ||
                        root.msSpeechRecognition ||
                        root.oSpeechrecognition ||
                        root.SpeechRecognition;

How to use?

- in chrome 25+ (current 29)
var recognition = new webkitSpeechRecognition();
// Some configuration
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'en-US';
// Event handlers
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }

 recognition.start();
  • start() activates the speech recognizer
  • onstart is called once it begins capturing audio
  • onresult is called for each set of results
  • onend is called when done

Deleted demo

Can be anyway be found at 
Web Speech API Demonstration 

and source: github 
 recognition.interimResults = true;
 var final_transcript = '';
 recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
            final_transcript += event.results[i][0].transcript;
        } else {
            interim_transcript += event.results[i][0].transcript;
        }
    }
 };
interimResults - isFinal

Deleted demo

This is unfortunately not present in any other place than in the original deck. I will try to rectify this in the future.

Thank you for your time


Good resources:
Made with Slides.com