API tools faq
paste
luistavares

JavaScript - Comandos por voz com a Web Speech API

luistavares
Feb 3rd, 2023 (edited)
1,468
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.56 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Speech Commands</title>
  6.     <style>
  7.       body, html {
  8.         margin: 0;
  9.       }
  10.  
  11.       html {
  12.         height: 100%;
  13.       }
  14.  
  15.       body {
  16.         height: inherit;
  17.         overflow: hidden;
  18.         max-width: 800px;
  19.         margin: 0 auto;
  20.       }
  21.  
  22.       h1, p {
  23.         font-family: sans-serif;
  24.         text-align: center;
  25.         padding: 15px;
  26.       }
  27.  
  28.       .control {
  29.         height: 100px;
  30.         overflow: auto;
  31.         position: absolute;
  32.         bottom: 0px;
  33.         right: 0;
  34.         left: 0;
  35.         background-color: rgba(255,255,255,0.2);
  36.         text-align: center;
  37.       }
  38.  
  39.       #box{
  40.         width: 100px;
  41.         height: 100px;
  42.         border: 2px solid black;
  43.         border-radius: 4px;
  44.         position: absolute;
  45.         left: 300px;
  46.         top:300px;
  47.         transition: top 2s, left 2s;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <h1>Comandos por voz com a Web Speech API</h1>
  53.     <div id="box"></div>
  54.     <p class="hints">Use os comandos: 'azul', 'verde',
  55.       'vermelho', 'branco', 'mover para a direita',
  56.       'mover para a esquerda', 'mover para cima',
  57.       'mover para baixo'.</p>
  58.     <div class="control">
  59.       <p class="output"><em>...Mensagens</em></p>
  60.       <button id="btn-start">Iniciar</button>
  61.       <button id="btn-stop">Parar</button>
  62.     </div>    
  63.     <script>
  64.       var x = 300;
  65.       var y = 300;
  66.       var color = 'white';
  67.  
  68.       var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
  69.       var recognition = new SpeechRecognition();
  70.       recognition.continuous = true;
  71.       recognition.lang = 'pt-BR';
  72.       recognition.interimResults = false;
  73.       recognition.maxAlternatives = 1;
  74.  
  75.       var diagnostic = document.querySelector('.output');
  76.       var box = document.querySelector('#box');
  77.  
  78.       recognition.onresult = function(event) {
  79.        
  80.         let length = event.results.length;  
  81.         let command = event.results[length-1][0].transcript;
  82.         diagnostic.textContent = 'Resultado recebido: ' + command + '.';
  83.  
  84.         if (command.toLowerCase().indexOf("direita") > -1){
  85.           x += 50;
  86.           updateBoxProperties();
  87.         }
  88.         else if (command.toLowerCase().indexOf("esquerda") > -1){
  89.           x -= 50;
  90.           updateBoxProperties();
  91.         }
  92.         else if (command.toLowerCase().indexOf("cima") > -1){
  93.           y -= 50;
  94.           updateBoxProperties();
  95.         }
  96.         else if (command.toLowerCase().indexOf("baixo") > -1){
  97.           y += 50;
  98.           updateBoxProperties();
  99.         }
  100.         else if (command.toLowerCase().indexOf("verde") > -1){
  101.           color = 'green';
  102.           updateBoxProperties();
  103.         }
  104.         else if (command.toLowerCase().indexOf("azul") > -1){
  105.           color = 'blue';
  106.           updateBoxProperties();
  107.         }
  108.         else if (command.toLowerCase().indexOf("vermelho") > -1){
  109.           color = 'red';
  110.           updateBoxProperties();
  111.         }
  112.         else if (command.toLowerCase().indexOf("branco") > -1){
  113.           color = 'white';
  114.           updateBoxProperties();
  115.         }
  116.       }
  117.  
  118.       function updateBoxProperties(){
  119.         box.style.left = x+"px";
  120.         box.style.top = y+"px";
  121.         box.style.backgroundColor = color;
  122.       }
  123.  
  124.       document.querySelector('#btn-start').onclick = function() {
  125.         recognition.start();
  126.       }
  127.  
  128.       document.querySelector('#btn-stop').onclick = function() {
  129.         recognition.stop();
  130.       }
  131.     </script>
  132.   </body>
  133. </html>
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!