JavaScript Speech Recognition

By  on  
Speech Recognition

Speech recognition software is becoming more and more important; it started (for me) with Siri on iOS, then Amazon's Echo, then my new Apple TV, and so on.  Speech recognition is so useful for not just us tech superstars but for people who either want to work "hands free" or just want the convenience of shouting orders at a moment's notice.  Browser tech sometimes lags behind native technology but not for speech recognition:  the technology in the browser today and it's time to use it:  the SpeechRecognition API.

SpeechRecognition

For as advanced of a concept speech recognition is, the API to use it is fairly simple:

var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 5;
recognition.start();

recognition.onresult = function(event) {
    console.log('You said: ', event.results[0][0].transcript);
};

The first match is at the event.results[0][0].transcript path; you can also set the number of alternatives in the case that what you're listening for could be ambiguous.

You can even add your own terms using the SpeechGrammarList object:

var grammar = '#JSGF V1.0; grammar colors; public  = aqua | azure | beige ... ;'
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;

There are several events emitted during the speech recognition process, so you can use the following snippet to follow the event timeline:

[
 'onaudiostart',
 'onaudioend',
 'onend',
 'onerror',
 'onnomatch',
 'onresult',
 'onsoundstart',
 'onsoundend',
 'onspeechend',
 'onstart'
].forEach(function(eventName) {
    recognition[eventName] = function(e) {
        console.log(eventName, e);
    };
});

A few caveats about the using speech recognition:

  • Chrome ends the listener after a given amount of time, so you'll need to hook into the end event to restart the speech listener
  • If you have multiple tabs using the speech listener API, you may experience the listener ending quickly

annyang!

The excellent annyang library provides a neat API for listening to for desired commands, all in an awesome 2KB package.  The following is a sample usage of annyang:

// Let's define our first command. First the text we expect, and then the function it should call
var commands = {
    'play video': function() {
        document.querySelector('video').play();
    },
    'pause video': function() {
        document.querySelector('video').pause();
    }
    '* video': function(word) {
        if(word === 'play') {
            document.querySelector('video').play();
        }
        else if(word === 'pause' || word === 'stop') {
            document.querySelector('video').pause();
        }
    }
};

// Add our commands to annyang
annyang.addCommands(commands);

// Start listening. You can call this here, or attach this call to an event, button, etc.
annyang.start();

Note that not only can you provide an exact phrase to listen for, but you can also provide a wildcard string; the wildcard string is useful in cases where you want to prefix your commands, much like saying "Siri: (instructions)" or "Echo: (instructions)".

It's so cool that speech recognition is available within the browser today.  If you want to see an awesome application of this feature, check out Mozilla VR's Kevin Ngo's amazing demo:  Speech Recognition + A-Frame VR + Spotify.  You could even use this API to listen for "wtf" when someone reviews your code!  Take some time to play with this API and create something innovative!

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    dwImageProtector Plugin for jQuery

    I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers...

  • By
    Web Audio API

    The Web Audio API allows developers to load and decode audio on demand using JavaScript.  The more I evaluate awesome games for Firefox OS TVs, the more I get to learn about these APIs that I normally wouldn't touch.  The following is a very basic introduction to the WebAudio API...

Discussion

  1. Adam Snodgrass

    The Speech Recognition API has been disabled in Chromium and Chromium derivatives like Electron but it looks like if you want the feature you can use their Cloud Speech API.

  2. Kostas

    Probably, a better initializer:

    var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
    
  3. Paul

    Another speech recognition interface is https://www.textfromtospeech.com/uk/voice-to-text/

  4. Eric

    Has anyone else had problems using this and other speech recognition on Android Nougat? Is Google pushing everyone to use the Cloud Speech API?

  5. Paterson

    recognition. lang = ‘en-US’ ; how can i put multiple language. plse help me thank

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!