API tools faq
paste
luistavares

JavaScript - Reconhecimento de voz com a Web Speech API (Comentado)

luistavares
Mar 9th, 2023 (edited)
701
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.00 KB | None | 0 0
raw download clone embed print report diff
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Reconhecimento de Voz</title>
  6.     <style>
  7.         .words {            
  8.             height:400px;
  9.             width: 700px;
  10.             border: 1px solid black;
  11.             overflow-y: scroll;
  12.         }
  13.         .words span {
  14.             font-size: 22px;
  15.         }
  16.         .button_speech {
  17.             font-size: 22px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <h1>Reconhecimento de Voz com a Web Speech API</h1>        
  23.     <div class="words"></div><br>
  24.     <button id="btn_speech" onclick='doStartStopCheck()'>
  25.             Transcrever Áudio
  26.     </button>
  27.     <script>
  28.         // Variável global que indica se o processo de reconhecimento está em andamento.
  29.         var ongoing = false;
  30.        
  31.         // Variável global que irá armazenar o módulo de reconhecimento de voz
  32.         var recognition = null;
  33.  
  34.         // Função que verifica se o usuário ainda deixou o reconhecimento de voz atividado pelo botão.
  35.         function verificaStatus(){
  36.             if (ongoing == true){
  37.                 recognition.start();
  38.             }
  39.         }
  40.  
  41.         // Função que configura o módulo para reconhecimento de voz
  42.         function init(){
  43.             // Corrigindo a referência padrão do módulo de reconhecimento, caso ainda em versão de protótipo.
  44.             window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  45.            
  46.             // Instanciando o módulo de reconhecimento de voz
  47.             recognition = new SpeechRecognition();
  48.            
  49.             // Configurando o módulo para mostrar resultados provisórios
  50.             recognition.interimResults = true;
  51.            
  52.             // Configurando a língua
  53.             recognition.lang = 'pt-BR';
  54.            
  55.             // Crio um elemento span e apendo à DIV que irá apresentar o texto transcrito (variável s).
  56.             var s = document.createElement('span');
  57.             const words = document.querySelector('.words');
  58.             words.appendChild(s);
  59.  
  60.             // Adicion um evento que é chamado a cada resultado obtido na transcrição.
  61.             recognition.addEventListener('result', e => {
  62.                
  63.                 // Constante transcript recebe o texto resultado da transcrição.
  64.                 const transcript = Array.from(e.results)
  65.                 .map(result => result[0])
  66.                 .map(result => result.transcript)
  67.                 .join('');
  68.                
  69.                 // Adiciono a transcrição como conteúdo interno do elemento span (varável s), e depois s é apendado na DIV.
  70.                 s.textContent = transcript + ", ";
  71.                 if (e.results[0].isFinal) {
  72.                     s = document.createElement('span');
  73.                     words.appendChild(s);      
  74.                 }
  75.                 });
  76.            
  77.             // Registro evento para ser executado ao final de trechos de reconhecimento de voz
  78.             recognition.addEventListener('end', verificaStatus);
  79.            
  80.             // Realizo uma chamada que inicia o reconhecimento de voz
  81.             recognition.start();
  82.         }
  83.  
  84.         // Esta mesma função é chamada para iniciar ou interromper o reconhecimento de voz.
  85.         // São realizadas condições para verificar qual o último estado, então,
  86.         // ao chamar esta função ela alterna entre os estados 'em execução' ou 'interrompido'.
  87.         function doStartStopCheck(){
  88.            
  89.             // Condição que verifica se está rodando, neste caso vai interromper
  90.             if(ongoing == true){
  91.                 ongoing = false;
  92.                 recognition.stop();    
  93.                 document.getElementById('btn_speech').innerHTML = "Transcrever Áudio";
  94.             }
  95.             // Caso não entre na condição anterior, significa que o estado é interrompido ou parado
  96.             // Nesta condiçao, verificamos se já existe o módulo de reconhecimento. Caso positivo, apenas iniciamos o módulo.
  97.             else if (recognition) {
  98.                 ongoing = true;
  99.                 recognition.start();       
  100.                 document.getElementById('btn_speech').innerHTML = "Interromper";
  101.             }
  102.             // Neste senão, significa que o estado é parado e que o módulo ainda não foi instanciado.
  103.             // Neste caso, chamos a função init para inicializar o módulo.
  104.             else {
  105.                 console.log("init");
  106.                 ongoing = true;
  107.                 init();    
  108.                 document.getElementById('btn_speech').innerHTML = "Interromper";
  109.             }
  110.         }
  111.  
  112.         // Função que rola o scroll da DIV à medida que o texto transcrito é apresentado
  113.         function rolaScroll(){
  114.             const w = document.querySelector('.words');
  115.             w.scrollTop = w.scrollHeight;
  116.         }
  117.        
  118.         // Evento que chama a função de rolar scroll a cada 1 segundo.
  119.         setInterval(rolaScroll, 1000);
  120.  
  121.     </script>
  122. </body>
  123. </html>
  124.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!