Introdução ao sistema de reconhecimento de voz usando Javascript

Neste tutorial você vai ver uma introdução a "Web Speech Recognition" a API de reconhecimento de voz em Javascript. E você vai ver também como podemos criar um sistema de reconhecimento e busca por voz parecido com o "Ok Google".

Assista o vídeo e aprenda

Existem várias maneiras de criar um sistema de reconhecimento de voz usando JavaScript. Uma delas é usando a API de reconhecimento de voz do navegador.

Veja um exemplo de como você pode criar um sistema de reconhecimento de voz usando a Web Speech Recognition seguindo alguns passos simples:

1. Verifique se o navegador suporta a API de reconhecimento de voz

if ('webkitSpeechRecognition' in window) {
  console.log('O navegador suporta a API de reconhecimento de voz.');}else {
  console.log('O navegador não suporta este recurso.');
}

Copiar

2. Se o navegador suportar a API de reconhecimento de voz, crie um novo objeto da API.

const recognition = new webkitSpeechRecognition();Copiar

3. Define algumas opções de reconhecimento de voz

recognition.continuous = true;
recognition.interimResults = true;

Copiar

A propriedade continuous controla se resultados contínuos são retornados para cada reconhecimento ou apenas um único resultado.

A propriedade interimResults controla se os resultados provisórios devem ser retornados ( true) ou não ( false.)

Os resultados provisórios são resultados que ainda não são finais (por exemplo, a SpeechRecognitionResult.isFinalpropriedade é false.)

4. Defina a função que será executada quando o reconhecimento de voz começar.

recognition.onstart = function() {
    console.log('O reconhecimento de voz começou!');
};

Copiar

5. Defina a função que será executada quando o reconhecimento de voz terminar.

recognition.onresult = function(event) {
    // Obtém o resultado do reconhecimento de voz
    const result = event.results[event.resultIndex];
    // Obtém a transcrição da fala
    const transcript = result[0].transcript;
    // Exibe a transcrição da fala no console
    console.log(`Você disse: ${transcript}`);
 };

Copiar

6. Crie uma função que será executada quando ocorrer um erro no reconhecimento de voz

recognition.onerror = function(event) {
    console.log(`Ocorreu um erro no reconhecimento de voz: ${event.error}`);
 };

Copiar

7. Inicie o reconhecimento de voz quando o usuário clicar em um botão.

document.querySelector('#start-recognition').addEventListener('click', function() {
    recognition.start();
 });

Copiar

Este exemplo cria um novo objeto de reconhecimento de voz usando a API de reconhecimento de voz do navegador e define algumas opções de reconhecimento de voz, como o modo contínuo e a exibição de resultados intermediários. Em seguida, define as funções que serão executadas quando o reconhecimento de voz começar, quando houver resultados e quando ocorrer um erro. Por fim, inicia o reconhecimento de voz quando o usuário clicar em um botão.

Este é apenas um exemplo simples, e existem muitas outras coisas que você pode fazer com a API de reconhecimento de voz do navegador. Além disso, você pode usar outras bibliotecas e ferramentas para criar sistemas mais avançados de reconhecimento de voz.