View difference between Paste ID: <a href="/st35GEBu">st35GEBu</a> and <a href="/GE3aYNEP">GE3aYNEP</a>

<!DOCTYPE html>
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	-	var p = document.createElement('span');
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	-	words.appendChild(p);
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	-	p.textContent = transcript + ", ";
53	+
54
55	-	p = document.createElement('span');
55	+	// Crio um elemento span e apendo à DIV que irá apresentar o texto transcrito (variável s).
56	-	words.appendChild(p);
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	-	if(ongoing == true){ // se tiver rodando, vai interromper
64	+
65		.map(result => result[0])
66		.map(result => result.transcript)
67		.join('');
68
69	-	else if (recognition) { // se tiver instância SpeechRecognition, apenas reinicia
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	-	else { // se ainda não criou instância, chama a função para inicialização
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