DEV Community

Valter Zanchetti Filho
Valter Zanchetti Filho

Posted on

Oracle APEX: Transcrevendo audio em texto sem uso de REST direto no navegador em 5 minutos

Sempre que faço uma pesquisa devido a alguma necessidade específica, costumo explorar o Google e o Github , fazendo o download de aplicações que outros devs publicam para tentar aprender novas técnicas. Despretensiosamente, buscando formas de fazer drag and drop num interactive grid, me deparo com um teste de transcrição de audio para texto do Paulo Kunzel neste link. Aproveitei que já tinha instalado o app e decidi testar.

Aqui vai meu parecer: Achei o funcionamento dessa abordagem fantástico pelo fato de ser tão rápido e rodar diretamente no navegador e sem necessidade de contratação de qualquer plano de empresa externa, chamada REST ou AI para processar essa transcrição. Pedi para o ChatGPT explicar sobre o funcionamento disso e aqui vai a resposta:

“O reconhecimento de voz no navegador usando SpeechRecognition funciona de forma nativa, sem a necessidade de enviar manualmente o áudio para um servidor. No entanto, o áudio é processado na nuvem — normalmente pelos servidores do Google — de forma automática e transparente. O navegador capta o som do microfone, envia para os servidores de reconhecimento de fala e retorna o texto convertido via eventos JavaScript, tudo isso sem exigir chamadas manuais a APIs ou bibliotecas externas.”

Explorando um pouco a aplicação fiz alguns pequenos ajustes para aceitar audios mais longos e decidi compartilhar a técnica, que é bem simples, por aqui.

  1. Criar um botão com um nome e static id de sua preferência. Este botão deve ter ação definida como dynamic action. Neste caso vamos chamar o botão de DITAR e vamos colocar o static-id como st_ditar

  2. Criar um campo de texto onde o texto ditado será transcrito em tempo real. Neste caso o campo será o P31_TEXTO_RAPIDO.

  3. Cadastrar o código abaixo no Execute when Page Loads da sua página, trocando os nomes e static ids por outros de sua preferência:

let recognition = new window.SpeechRecognition();

recognition.grammars = new window.SpeechGrammarList(); recognition.continuous = true; 
recognition.lang = 'pt-BR'; 
recognition.interimResults = true; 
recognition.maxAlternatives = 1; 

/* recognition.addEventListener('speechend', () =>{ recognition.stop(); }); */

document.querySelector('#st_ditar').addEventListener('mousedown', () =>{ recognition.start(); });
document.querySelector('#st_ditar').addEventListener('mouseup', () =>{ recognition.stop(); });

recognition.addEventListener('error', (event) => { console.error('Erro no reconhecimento do texto: ', event.error); });

recognition.onresult = function (event) { console.log('-----------------------------'); 

let last = event.results.length - 1; 
let texto = event.results[last][0].transcript; 

apex.item('P31_TEXTO_RAPIDO').setValue(texto);
Enter fullscreen mode Exit fullscreen mode

Explicação rápida:

Este código ativa o reconhecimento de voz no navegador usando a API SpeechRecognition. Ao clicar e segurar o botão com id="st_ditar", o reconhecimento começa (mousedown), e ao soltar (mouseup), ele é encerrado. O áudio capturado é enviado automaticamente para os servidores de reconhecimento de fala do navegador (Google ou Microsoft, dependendo do navegador), que retornam o texto. O resultado final é atribuído ao item P31_TEXTO_RAPIDO do Oracle APEX. A configuração define o idioma como português do Brasil (pt-BR), ativa resultados parciais (interimResults) e limita as alternativas de texto a uma (maxAlternatives = 1). Erros são tratados e exibidos no console com console.error.

Quanto aos dois parâmetros:

interimResults

  • true :

    O reconhecimento retorna resultados parciais enquanto a fala ainda está acontecendo. Isso é útil para mostrar texto "ao vivo", em tempo real.

  • false:

    O navegador só retorna o texto final, após detectar uma pausa na fala. Isso reduz a quantidade de eventos disparados, mas não mostra nada durante a fala.

maxAlternatives

  • 1:

    Retorna apenas a melhor interpretação da fala.

  • >1 (ex: 3):

    Retorna várias alternativas para a mesma fala, ordenadas por confiança. Isso pode ser útil se você quiser deixar o usuário escolher entre diferentes opções ou fazer validações com maior tolerância.

No meu exemplo a tela ficou assim:

Em 5 minutos você consegue replicar isso na sua aplicação. Tente e depois comente aqui o que achou disso.

Top comments (0)