Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +24 -8
templates/index.html
CHANGED
|
@@ -5,13 +5,17 @@
|
|
| 5 |
</head>
|
| 6 |
<body>
|
| 7 |
<h1>Reconocimiento de Voz</h1>
|
| 8 |
-
<button id="startRecording">
|
|
|
|
|
|
|
| 9 |
<div id="output"></div>
|
| 10 |
|
| 11 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
| 12 |
<script>
|
| 13 |
-
const socket = io.connect('
|
| 14 |
const startRecordingButton = document.getElementById('startRecording');
|
|
|
|
|
|
|
| 15 |
const outputDiv = document.getElementById('output');
|
| 16 |
let mediaRecorder;
|
| 17 |
const audioChunks = [];
|
|
@@ -28,21 +32,33 @@
|
|
| 28 |
};
|
| 29 |
|
| 30 |
mediaRecorder.onstop = function () {
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
// Limpiar el array de fragmentos de audio
|
| 35 |
-
audioChunks.length = 0;
|
| 36 |
};
|
| 37 |
|
| 38 |
-
mediaRecorder.start();
|
| 39 |
startRecordingButton.disabled = true;
|
|
|
|
|
|
|
|
|
|
| 40 |
})
|
| 41 |
.catch(function (err) {
|
| 42 |
console.error('Error al acceder al micr贸fono:', err);
|
| 43 |
});
|
| 44 |
});
|
| 45 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 46 |
socket.on('transcription', function (data) {
|
| 47 |
outputDiv.innerHTML = `Texto reconocido: ${data}`;
|
| 48 |
});
|
|
|
|
| 5 |
</head>
|
| 6 |
<body>
|
| 7 |
<h1>Reconocimiento de Voz</h1>
|
| 8 |
+
<button id="startRecording">Comenzar Grabaci贸n</button>
|
| 9 |
+
<button id="stopRecording" disabled>Detener Grabaci贸n</button>
|
| 10 |
+
<button id="sendAudio" disabled>Enviar al Servidor</button>
|
| 11 |
<div id="output"></div>
|
| 12 |
|
| 13 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
| 14 |
<script>
|
| 15 |
+
const socket = io.connect('http://' + document.domain + ':' + location.port);
|
| 16 |
const startRecordingButton = document.getElementById('startRecording');
|
| 17 |
+
const stopRecordingButton = document.getElementById('stopRecording');
|
| 18 |
+
const sendAudioButton = document.getElementById('sendAudio');
|
| 19 |
const outputDiv = document.getElementById('output');
|
| 20 |
let mediaRecorder;
|
| 21 |
const audioChunks = [];
|
|
|
|
| 32 |
};
|
| 33 |
|
| 34 |
mediaRecorder.onstop = function () {
|
| 35 |
+
sendAudioButton.disabled = false;
|
| 36 |
+
startRecordingButton.disabled = true;
|
| 37 |
+
stopRecordingButton.disabled = true;
|
|
|
|
|
|
|
| 38 |
};
|
| 39 |
|
|
|
|
| 40 |
startRecordingButton.disabled = true;
|
| 41 |
+
stopRecordingButton.disabled = false;
|
| 42 |
+
|
| 43 |
+
mediaRecorder.start();
|
| 44 |
})
|
| 45 |
.catch(function (err) {
|
| 46 |
console.error('Error al acceder al micr贸fono:', err);
|
| 47 |
});
|
| 48 |
});
|
| 49 |
|
| 50 |
+
stopRecordingButton.addEventListener('click', () => {
|
| 51 |
+
mediaRecorder.stop();
|
| 52 |
+
sendAudioButton.disabled = false;
|
| 53 |
+
stopRecordingButton.disabled = true;
|
| 54 |
+
});
|
| 55 |
+
|
| 56 |
+
sendAudioButton.addEventListener('click', () => {
|
| 57 |
+
const audioBlob = new Blob(audioChunks, { 'type': 'audio/wav' });
|
| 58 |
+
socket.emit('audio_data', audioBlob);
|
| 59 |
+
audioChunks.length = 0; // Limpiar el array de fragmentos de audio
|
| 60 |
+
});
|
| 61 |
+
|
| 62 |
socket.on('transcription', function (data) {
|
| 63 |
outputDiv.innerHTML = `Texto reconocido: ${data}`;
|
| 64 |
});
|