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> | |