Aprenda como fazer o reconhecimento de fala com JavaScript! Crie uma página simples que realiza a transcrição de áudio para texto!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Na aula de hoje, quero te mostrar como realizar o reconhecimento de fala com JavaScript!
Isso mesmo, vamos criar uma página simples para que o nosso código faça a transcrição de áudio com JavaScript, transformando-o em um texto.
Com certeza, você já se deparou com esse tipo de ferramenta, não é mesmo? Pois bem, hoje você aprenderá a desenvolver, passo a passo o seu próprio código de reconhecimento de fala com JavaScript para incorporar em seus projetos.
Para construir e aplicar nosso reconhecimento de fala com JavaScript, precisaremos de dois arquivos: um arquivo HTML com o código da página e um arquivo JavaScript onde desenvolveremos nosso transcritor.
Neste projeto, utilizarei o Visual Studio Code e a extensão Live Server. Para aprender como instalá-los, consulte essa aula aqui.
Como o foco da aula é o código JavaScript, deixei o código da página HTML pronto para que você possa copiar e usar para testar seu transcritor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="display: flex; flex-direction: column">
<h1>Transcritor Automático</h1>
<textarea
id="texto-transcrito"
rows="6"
cols="80"
name="texto"
placeholder="Aperte o botão e fale"
readonly>
</textarea>
<button style="max-width: 10rem; margin: 2rem 0" id="transcrever">
Iniciar
</button>
</body>
</html>É uma página bastante simples, mas servirá para o propósito da aula. Para visualizá-la, basta clicar com o botão direito do mouse sobre o nome do arquivo e selecionar Open with Live Server.
Como pode perceber, é uma página bastante simples, contendo um título, uma caixa de texto e um botão, que, por enquanto, não executa nada.
Para adicionar funcionalidade à página, iremos criar e desenvolver nosso código JavaScript. Criei um arquivo chamado app.js para isso, mas você pode nomeá-lo como preferir, desde que tenha a extensão “.js”.
O primeiro passo será obter duas referências do nosso código HTML: uma para a caixa de texto (elemento textarea) e outra para o botão (elemento button). Vamos definir essas duas referências como constantes dentro do nosso arquivo JavaScript.
const caixaTexto = document.getElementById('texto-transcrito');
const botaoTranscricao = document.getElementById('transcrever');Feito isso, vamos criar uma terceira variável chamada reconhecimento. Ela receberá a funcionalidade webkitSpeechRecognition.
const caixaTexto = document.getElementById('texto-transcrito');
const botaoTranscricao = document.getElementById('transcrever');
const reconhecimento = new webkitSpeechRecognition();Essa é uma funcionalidade existente no navegador Chrome e em outros navegadores baseados em Chrome (Edge, Opera, Brave, etc).
Caso você utilize outro navegador, a funcionalidade pode ter um nome diferente. Por exemplo, no Safari, dentro do MacBook, você utilizará apenas speechRecognition().
Com as nossas variáveis criadas, vamos acessar o evento onresult do nosso objeto reconhecimento. Esse evento será acionado quando o reconhecimento de fala for concluído, e iremos definir nele o que acontecerá quando esse evento for disparado.
Nesse caso, queremos obter a transcrição da fala. Faremos isso definindo uma função de transcrição na forma de uma arrow function.
reconhecimento.onresult = (evento) => {
const transcricao = evento.results[0][0].transcript;
caixaTexto.innerText = transcricao;
};Essa função recebe como argumento as informações sobre o resultado do reconhecimento de fala, nesse caso, denominado evento. Você pode usar outro nome, desde que o utilize com o mesmo nome dentro da função, mas por convenção, utiliza-se o termo evento mesmo.
Isso porque essa função receberá o evento gerado após o reconhecimento de fala ser concluído.
Dentro dela, vamos definir uma nova variável chamada transcricao que acessará a transcrição do resultado do reconhecimento de fala.
O objeto evento possui uma propriedade chamada results, que é uma lista de listas. Para acessar o primeiro elemento de cada uma, utilizamos results[0][0]. Em seguida, usamos transcript para obter a transcrição.
Dessa forma, nossa variável transcricao armazenará a versão em texto do que foi reconhecido da fala.
Para exibir esse texto na tela do usuário, vamos chamar a variável caixaTexto que criamos anteriormente e atribuir à propriedade innerText o resultado dessa transcrição.
Com nossa função pronta, precisamos atribuir uma ação ao botão da nossa página. Será esse botão que dará início ao processo de reconhecimento de voz quando for clicado.
Para isso, precisamos definir o método .addEventListener ao botão, que dará a ele a capacidade de escutar um evento. Esse evento será o clique no próprio botão.
Quando ocorrer esse clique, será executada uma arrow function que iniciará o processo de reconhecimento.
const caixaTexto = document.getElementById('texto-transcrito');
const botaoTranscricao = document.getElementById('transcrever');
const reconhecimento = new webkitSpeechRecognition();
reconhecimento.onresult = (evento) => {
const transcricao = evento.results[0][0].transcript;
caixaTexto.innerText = transcricao;
};
botaoTranscricao.addEventListener('click', () => reconhecimento.start());Assim, concluímos o nosso código em JavaScript. Agora, só precisamos integrá-lo com a página HTML.
Para que nosso código JavaScript funcione com a nossa página HTML, precisamos criar uma integração entre eles. Dentro do arquivo HTML, antes de fechar a tag <body>, vamos adicionar uma tag <script>.
Para essa tag, definiremos o atributo src com o caminho para o arquivo JavaScript, dessa forma, as funcionalidades que desenvolvemos dentro do arquivo JavaScript estarão disponíveis e prontas para serem utilizadas na página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="display: flex; flex-direction: column">
<h1>Transcritor Automático</h1>
<textarea
id="texto-transcrito"
rows="6"
cols="80"
name="texto"
placeholder="Aperte o botão e fale"
readonly>
</textarea>
<button style="max-width: 10rem; margin: 2rem 0" id="transcrever">
Iniciar
</button>
<script src="./app.js"></script>
</body>
</html>Com isso, carregue novamente a nossa página com o Live Server e teste o código.
Quando clicar no botão Iniciar, o seu navegador solicitará acesso ao seu microfone.
Após conceder a permissão, você poderá começar a falar, e quando terminar, o navegador gerará automaticamente a transcrição do que foi dito dentro da caixa de texto.
Perceba que o transcritor não adiciona pontuação, mas ele transcreverá tudo que você falar.
Na aula de hoje, você aprendeu como realizar o reconhecimento de fala com JavaScript, criando uma página simples para integrar o código e fazer a transcrição de áudio.
Construímos o código do zero, passo a passo, fazendo a integração do código JavaScript com a página HTML. Esse é um recurso muito interessante, que você pode integrar em diversos projetos.
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador