in
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reconocimiento de Voz con Vosk</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
#result { border: 1px solid #ccc; padding: 10px; min-height: 50px; margin: 20px 0; }
button { padding: 10px 15px; font-size: 16px; cursor: pointer; }
</style>
</head>
<body>
<h1>Reconocimiento de Voz con Vosk</h1>
<button id="startBtn">Comenzar</button>
<button id="stopBtn" disabled>Detener</button>
<div id="result"></div>
<div id="finalResult"></div>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<script>
const socket = io('http://localhost:3000');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const resultDiv = document.getElementById('result');
const finalResultDiv = document.getElementById('finalResult');
let audioContext;
let processor;
let microphone;
// Configuración del audio
async function setupAudio() {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
microphone = audioContext.createMediaStreamSource(stream);
processor = audioContext.createScriptProcessor(4096, 1, 1);
processor.onaudioprocess = (e) => {
const audioData = e.inputBuffer.getChannelData(0);
const raw = convertFloat32ToInt16(audioData);
socket.emit('audio', raw);
};
microphone.connect(processor);
processor.connect(audioContext.destination);
}
// Convertir Float32 a Int16
function convertFloat32ToInt16(buffer) {
const l = buffer.length;
const buf = new Int16Array(l);
for (let i = 0; i < l; i++) {
buf[i] = Math.min(1, buffer[i]) * 0x7FFF;
}
return buf.buffer;
}
// Eventos de los botones
startBtn.addEventListener('click', async () => {
try {
await setupAudio();
socket.emit('start', audioContext.sampleRate);
startBtn.disabled = true;
stopBtn.disabled = false;
resultDiv.textContent = "Escuchando...";
} catch (err) {
console.error("Error al iniciar:", err);
}
});
stopBtn.addEventListener('click', () => {
if (processor) {
processor.disconnect();
microphone.disconnect();
socket.emit('stop');
startBtn.disabled = false;
stopBtn.disabled = true;
}
});
// Escuchar resultados
socket.on('result', (data) => {
const result = JSON.parse(data);
if (result.text) {
resultDiv.textContent = result.text;
}
});
socket.on('final', (data) => {
const finalResult = JSON.parse(data);
if (finalResult.text) {
finalResultDiv.textContent = "Resultado final: " + finalResult.text;
}
});
</script>
</body>
</html>
Comentarios
Publicar un comentario