Neste tutorial, mostraremos como implementar a assistência de voz em seu aplicativo React usando React Speech Recognition.
Abordaremos o seguinte:
- O que é o React Speech Recognition?
- Configuração e instalação do React Speech Recognition
- Adicionando ganchos de reconhecimento de voz React
- Uso do React Speech Recognition para realizar tarefas
O que é o React Speech Recognition?
React Speech Recognition é um React Hook que funciona com a API Web Speech para traduzir a fala do microfone do seu dispositivo em texto. Esse texto pode ser lido pelo aplicativo React e usado para realizar tarefas.
O React Speech Recognition fornece uma opção de comando para realizar uma determinada tarefa com base em uma frase de fala específica. Por exemplo, quando um usuário pede informações sobre o clima, você pode realizar uma chamada de API do clima. Este é apenas um exemplo básico, mas quando se trata de assistência e controle de voz, as possibilidades são infinitas .
Suporte ao navegador
Desde fevereiro de 2021, o React Speech Recognition é compatível com os seguintes navegadores:
- Google Chrome (recomendado)
- Microsoft Edge
- Google Chrome para Android
- Android Webview
- Samsung Internet
Infelizmente, o iOS não oferece suporte a essas APIs.
Configuração e instalação do React Speech Recognition
Para adicionar o React Speech Recognition ao seu projeto React, basta abrir o seu terminal e digitar:
npm i-salvar o reconhecimento de fala de reação
Quando você pressiona Enter, adiciona um gancho ao seu projeto.
Crie uma IU de demonstração
Para ver como o Gancho de reconhecimento de fala funciona, construiremos uma IU simples.
Primeiro, adicionaremos um botão redondo com um ícone de microfone, um botão com texto para indicar se estamos ouvindo ou não a fala do usuário e um botão de parar para parar de ouvir.
Abaixo desses elementos, mostraremos a tradução de fala em texto do usuário e criaremos um botão de redefinição para limpar o texto e parar de ouvir.
Aqui está nosso JSX para o componente descrito acima:
//App.js
function App () { Retorna ( 
Clique para começar a ouvir Texto da fala aqui );
}
Com essa configuração, agora podemos adicionar alguns estilos:
//App.css
* { margem: 0; preenchimento: 0; dimensionamento da caixa: caixa de borda;
}
corpo { cor de fundo: rgba (0, 0, 0, 0,8); família da fonte:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; cor branca;
}
.mircophone-container { display: flex; justificar-conteúdo: centro; alinhar-itens: centro; largura: 100vw; altura: 50vh;
}
.microphone-icon-container { largura: 100px; altura: 100px; raio da borda: 50%; imagem de fundo: gradiente linear (128deg, #ffffff, # 647c88); preenchimento: 20px; margem direita: 20px; posição: relativa; cursor: ponteiro;
}
.microphone-icon-container.listening:: before { contente:""; largura: 100px; altura: 100px; cor de fundo: # ffffff81; posição: absoluta; topo: 50%; esquerda: 50%; transformar: traduzir (-50%,-50%) escala (1,4); raio da borda: 50%; animação: escuta infinita 1.5s;
}
@keyframes ouvindo { 0% { opacidade: 1; transformar: traduzir (-50%,-50%) escala (1); } 100% { opacidade: 0; transformar: traduzir (-50%,-50%) escala (1,4); }
}
.microphone-icon { largura: 100%; altura: 100%;
}
.microphone-status { tamanho da fonte: 22px; margem direita: 20px; largura mínima: 215px;
}
.btn { fronteira: nenhum; preenchimento: 10px 30px; margem direita: 10px; esboço: nenhum; cursor: ponteiro; tamanho da fonte: 20px; raio da borda: 25px; box-shadow: 0px 0px 10px 5px # ffffff1a;
}
.microphone-result-container { alinhamento de texto: centro; altura: 50vh; display: flex; direção flexível: coluna; justify-content: espaço entre; alinhar-itens: centro; acolchoamento inferior: 30px; }
.microphone-result-text { margin-bottom: 30px; largura: 70vw; overflow-y: automático;
}
.microphone-reset { borda: 1px sólido #fff; fundo: nenhum; cor branca; largura: ajuste-conteúdo;
}
Como você deve ter notado, também incluímos uma animação que será reproduzida quando a escuta for iniciada, alertando assim o usuário de que agora ele pode falar.
Adicionar ganchos de reconhecimento de voz React
Para usar o React Speech Recognition, devemos primeiro importá-lo para o componente. Usaremos o gancho useSpeechRecognition e o objeto SpeechRecognition .
Para importar o React Speech Recognition:
importar SpeechRecognition, {useSpeechRecognition} de"react-speech-recognition";
Para começar a ouvir a voz do usuário, precisamos chamar a função startListening :
SpeechRecognition.startListening ()
Para parar de ouvir, podemos chamar stopListening :
SpeechRecognition.stopListening ()
Para obter a transcrição da fala do usuário, usaremos transcript :
const {transcript}=useSpeechRecognition ()
Isso registrará o valor sempre que um usuário disser algo.
Para redefinir ou limpar o valor da transcrição, você pode chamar resetTranscript :
const {resetTranscript}=useSpeechRecognition ()
Usar a função resetTranscript definirá a transcrição como vazia.
Finalmente, para verificar se o navegador oferece suporte às APIs de fala da Web ou não, podemos usar esta função:
if (! SpeechRecognition.browserSupportsSpeechRecognition ()) { //O navegador não é compatível e retorna algumas informações úteis.
}
Código completo
Com tudo o que revisamos até este ponto, agora estamos prontos para configurar nosso código. Observe que no bloco abaixo, adicionamos os eventos de escuta e os estados correspondentes:
import {useRef, useState} de"react";
importar SpeechRecognition, {useSpeechRecognition} de"react-speech-recognition";
import"./App.css";
importar microPhoneIcon de"./microphone.svg"; function App () { const {transcrição, resetTranscript}=useSpeechRecognition (); const [isListening, setIsListening]=useState (false); const microfoneRef=useRef (nulo); if (! SpeechRecognition.browserSupportsSpeechRecognition ()) { Retorna ( O navegador não é compatível com reconhecimento de fala. ); } const handleListing=()=> { setIsListening (true); microfoneRef.current.classList.add ("ouvir"); SpeechRecognition.startListening ({ contínuo: verdadeiro, }); }; const stopHandle=()=> { setIsListening (false); microfoneRef.current.classList.remove ("ouvir"); SpeechRecognition.stopListening (); }; const handleReset=()=> { stopHandle (); resetTranscript (); }; Retorna ( {está ouvindo ?"Ouvir.........":"Clique para começar a ouvir"} {está ouvindo && ( )} {transcrição && ( {transcript} )} );
}
exportar aplicativo padrão;
Uso do React Speech Recognition para realizar tarefas
Agora configuramos o aplicativo para que, quando um usuário clicar no botão do microfone, o aplicativo ouça sua voz e produza uma transcrição abaixo. Você precisará permitir a permissão do microfone ao executar pela primeira vez.
Agora vem a parte divertida: adicionar comandos para realizar uma tarefa com base na fala/frases do usuário.
Adicionando comandos
Para adicionar comandos, devemos passar um array como uma opção de comandos para o useSpeechRecognition .
Antes de fazermos isso, no entanto, devemos preparar nosso array de comandos assim:
comandos const=[ { comando:"abrir *", retorno de chamada: (site)=> { window.open ("http://"+ website.split ("").join ("")); }, }, { comando:"mude a cor de fundo para *", retorno de chamada: (cor)=> { document.body.style.background=color; }, }, { comando:"reset", retorno de chamada: ()=> { handleReset (); }, }, , { comando:"redefinir cor de fundo", retorno de chamada: ()=> { document.body.style.background=`rgba (0, 0, 0, 0,8)`; }, }, ];
Lembre-se de que comandos é a matriz do objeto JSON com propriedades de comando e retorno de chamada. Para nossos propósitos, o comando é a propriedade onde você escreverá o comando; o retorno de chamada será acionado de forma correspondente.
No exemplo acima, você deve ter notado que passamos um símbolo de asterisco no primeiro e no segundo comando. Este símbolo nos permite capturar várias palavras e passá-las de volta como uma variável na função de retorno de chamada.
Você pode passar a variável comandos para useSpeechRecognition assim:
const {transcrição, resetTranscript}=useSpeechRecognition ({comandos});
Agora você deve ser capaz de executar seu aplicativo e comandos.
Para referência futura, nosso código completo para o aplicativo que criamos usando os Ganchos de reconhecimento de fala React se parece com este:
import {useRef, useState} de"react";
importar SpeechRecognition, {useSpeechRecognition} de"react-speech-recognition";
import"./App.css";
importar microPhoneIcon de"./microphone.svg";
function App () { comandos const=[ { comando:"abrir *", retorno de chamada: (site)=> { window.open ("http://"+ website.split ("").join ("")); }, }, { comando:"mude a cor de fundo para *", retorno de chamada: (cor)=> { document.body.style.background=color; }, }, { comando:"reset", retorno de chamada: ()=> { handleReset (); }, }, , { comando:"redefinir cor de fundo", retorno de chamada: ()=> { document.body.style.background=`rgba (0, 0, 0, 0,8)`; }, }, ]; const {transcrição, resetTranscript}=useSpeechRecognition ({comandos}); const [isListening, setIsListening]=useState (false); const microfoneRef=useRef (nulo); if (! SpeechRecognition.browserSupportsSpeechRecognition ()) { Retorna ( O navegador não é compatível com reconhecimento de fala. ); } const handleListing=()=> { setIsListening (true); microfoneRef.current.classList.add ("ouvir"); SpeechRecognition.startListening ({ contínuo: verdadeiro, }); }; const stopHandle=()=> { setIsListening (false); microfoneRef.current.classList.remove ("ouvir"); SpeechRecognition.stopListening (); }; const handleReset=()=> { stopHandle (); resetTranscript (); }; Retorna ( {está ouvindo ?"Ouvir.........":"Clique para começar a ouvir"} {está ouvindo && ( )} {transcrição && ( {transcript} )} );
}
exportar aplicativo padrão;
Conclusão
A esta altura, você deve ter um melhor entendimento de como usar os ganchos do React Speech Recognition em seu projeto. Para leitura futura, recomendo aprender mais sobre programação por voz e a outras maneiras que a IA pode ajudar em seus esforços de codificação.
Obrigado por ler o artigo. Por favor, deixe qualquer feedback ou comentário abaixo.
A postagem Usando o Reconhecimento de Fala React O Hook para assistência por voz apareceu primeiro no LogRocket Blog .
