SHOW:
|
|
- or go back to the newest paste.
| 1 | <!DOCTYPE html> | |
| 2 | <html lang="pt-br"> | |
| 3 | <head> | |
| 4 | <meta charset="utf-8" /> | |
| 5 | <title>Web Speech API - Sintetizador</title> | |
| 6 | </head> | |
| 7 | <body> | |
| 8 | <h1>Web Speech API - Sintetizador</h1> | |
| 9 | <p>Digite o texto no campo de entrada e clique no botão.</p> | |
| 10 | <input id="txt" type="text" size="50"/> | |
| 11 | <button id="play" type="button">Play</button> | |
| 12 | <script> | |
| 13 | // Instanciando o módulo de síntese | |
| 14 | const synth = window.speechSynthesis; | |
| 15 | ||
| 16 | // Função talk que acessa o valor digitado no input e cria um áudio para apresentá-lo | |
| 17 | function talk() {
| |
| 18 | ||
| 19 | - | console.log("talk");
|
| 19 | + | // Acessando o valor do input e atribuindo na variável t |
| 20 | let t = document.getElementById('txt').value;
| |
| 21 | - | msg.voice = voices[0]; // seleciono a primeira voz |
| 21 | + | |
| 22 | - | msg.rate = 1; // velocidade |
| 22 | + | // Acessando as vozes disponíveis no navegador e atribuindo na variável voices |
| 23 | - | msg.pitch = 1; // tom |
| 23 | + | |
| 24 | - | msg.text = t; // pegando a msg do campo |
| 24 | + | |
| 25 | // Condição que verifica se existe voz disponível | |
| 26 | if (voices.length !== 0) {
| |
| 27 | ||
| 28 | // Criando um enunciado de voz e atribuindo à variável msg. | |
| 29 | let msg = new SpeechSynthesisUtterance(); | |
| 30 | ||
| 31 | // Seleciono a primeira voz disponível e configuro na mensagem, que é a variável msg. | |
| 32 | msg.voice = voices[0]; | |
| 33 | ||
| 34 | // Configuro a velocidade 1. | |
| 35 | msg.rate = 1; | |
| 36 | ||
| 37 | // Configuro o tom de voz 1. | |
| 38 | msg.pitch = 1; | |
| 39 | ||
| 40 | // Atribuo o valor da variável t como texto para síntese de voz. | |
| 41 | msg.text = t; | |
| 42 | ||
| 43 | // Configuro a linguagem como português. | |
| 44 | msg.lang = "pt-BR"; | |
| 45 | ||
| 46 | // Chamo a função para reproduzir a mensagem. | |
| 47 | synth.speak(msg); | |
| 48 | } | |
| 49 | } | |
| 50 | ||
| 51 | // Crio o evento que chama a função talk ao clicar no botão. | |
| 52 | document.getElementById("play").onclick = talk; // evento
| |
| 53 | </script> | |
| 54 | </body> | |
| 55 | </html> | |
| 56 |
