Spaces:
Runtime error
Runtime error
<html> | |
<head> | |
<title>Reconocimiento de Voz TedCas-Demo cliente/servidor</title> | |
<style> | |
/* Estilos CSS para cambiar el color y el tamaño de los elementos */ | |
.listening { | |
color: gray; | |
font-size: 24px; | |
} | |
.recognized { | |
color: green; | |
font-size: 32px; /* Ajusta el tamaño de fuente a tu preferencia */ | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Logotipo y título --> | |
<div> | |
<img src="https://tse4.mm.bing.net/th?id=OIP.KUs6tP0b1rKLZ5lBq7JAEQHaDS&pid=Api&P=0&h=180" alt="Logo" width="200"> | |
<h1>Reconocimiento de Voz TedCas-Demo cliente/servidor</h1> | |
<p>Instrucciones de uso: </p> | |
<p>1)Escriba en cada casilla un comando a reconocer (NOTA: todo en minúsculas)</p> | |
<p>2)Pulse el botón "Activar reconocimiento" y diga un comando</p> | |
<p>3)Si el comando ha sido reconocido con éxito, el círculo gris correspondiente se pondrá verde.</p> | |
</div> | |
<!-- Cuadros de texto y elementos que cambian de color --> | |
<div> | |
<div> | |
<input type="text" id="input1" class="listening"> | |
<div id="colorIndicator1" class="listening">●</div> | |
</div> | |
<div> | |
<input type="text" id="input2" class="listening"> | |
<div id="colorIndicator2" class="listening">●</div> | |
</div> | |
<div> | |
<input type="text" id="input3" class="listening"> | |
<div id="colorIndicator3" class="listening">●</div> | |
</div> | |
</div> | |
<!-- Botón para iniciar la grabación de voz --> | |
<button id="startRecording">Activar reconocimiento</button> | |
<div id="output"></div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> | |
<script> | |
const socket = io.connect('http://' + document.domain + ':' + location.port, {secure: true}); | |
const startRecordingButton = document.getElementById('startRecording'); | |
const outputDiv = document.getElementById('output'); | |
let mediaRecorder; | |
let audioChunks = []; | |
let recognition; | |
startRecordingButton.addEventListener('click', () => { | |
if (!recognition) { | |
recognition = new webkitSpeechRecognition(); | |
recognition.lang = 'es-ES'; | |
recognition.onresult = function (event) { | |
const result = event.results[0][0].transcript; | |
socket.emit('audio_data', result); | |
// Inicialmente, establecer todos los elementos en gris | |
const elements = document.querySelectorAll('.listening'); | |
elements.forEach((element) => { | |
element.classList.remove('recognized'); | |
}); | |
// Verificar si el resultado coincide con el texto en los cuadros | |
const input1 = document.getElementById('input1'); | |
const input2 = document.getElementById('input2'); | |
const input3 = document.getElementById('input3'); | |
if (result.includes(input1.value)) { | |
document.getElementById('colorIndicator1').classList.add('recognized'); | |
} | |
if (result.includes(input2.value)) { | |
document.getElementById('colorIndicator2').classList.add('recognized'); | |
} | |
if (result.includes(input3.value)) { | |
document.getElementById('colorIndicator3').classList.add('recognized'); | |
} | |
}; | |
} | |
try { | |
recognition.start(); | |
} catch (error) { | |
console.error('Error al iniciar el reconocimiento de voz:', error); | |
} | |
}); | |
socket.on('transcription', function (data) { | |
outputDiv.innerHTML = `Texto reconocido: ${data}`; | |
}); | |
</script> | |
</body> | |
</html> | |