Reconhecimento de fala em JavaScript

O software de reconhecimento de fala está se tornando cada vez mais importante; começou (para mim) com a Siri no iOS, depois com o Echo da Amazon, depois com minha nova Apple TV e assim por diante. O reconhecimento de fala é muito útil não apenas para nós, superstars da tecnologia, mas também para as pessoas que querem trabalhar “com as mãos livres” ou apenas querem a conveniência de gritar ordens a qualquer momento. A tecnologia do navegador às vezes fica atrás da tecnologia nativa, mas não para o reconhecimento de fala: a tecnologia no navegador hoje e é hora de usá-la: o SpeechRecognition (Reconhecimento de fala) API.

SpeechRecognition

Por mais avançado que seja o conceito de reconhecimento de fala, a API para usá-lo é bastante simples:

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

A primeira partida será no event.results[0][0].transcript o senhor também pode definir o número de alternativas, caso o que esteja procurando possa ser ambíguo.

O senhor pode até mesmo adicionar seus próprios termos usando o SpeechGrammarList :

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;

Há vários eventos emitidos durante o processo de reconhecimento de fala, portanto, o senhor pode usar o seguinte trecho para acompanhar a linha do tempo do evento:

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

Algumas ressalvas sobre o uso do reconhecimento de fala:

• O Chrome encerra o ouvinte após um determinado período de tempo, portanto, o senhor precisará se conectar ao end para reiniciar o ouvinte de fala
• Se o senhor tiver várias guias usando a API do ouvinte de fala, o ouvinte poderá terminar rapidamente

annyang!

O excelente annyang fornece uma API simples para ouvir os comandos desejados, tudo em um pacote incrível de 2 KB. A seguir, um exemplo de uso da 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();

Observe que, além de poder fornecer uma frase exata para ouvir, o senhor também pode fornecer uma string curinga; a string curinga é útil nos casos em que o senhor deseja prefixar os comandos, como se dissesse “Siri: (instruções)” ou “Echo: (instruções)”.

É muito legal que o reconhecimento de fala esteja disponível no navegador atualmente. Se o senhor quiser ver uma aplicação incrível desse recurso, confira a incrível demonstração de Kevin Ngo, do Mozilla VR: Reconhecimento de fala + A-Frame VR + Spotify. O senhor pode até usar essa API para ouvir “wtf” quando alguém revisa seu código! Reserve algum tempo para brincar com essa API e criar algo inovador!