proyecto

 El código completo con las correcciones para solucionar el problema de CORS:

server.js (actualizado)

javascript
const express = require('express');
const cors = require('cors');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
  cors: {
    origin: "*", // Permite todos los orígenes (en producción especifica tu dominio)
    methods: ["GET", "POST"]
  }
});
const vosk = require('vosk');
const fs = require('fs');
const path = require('path');

// Configura Express para servir archivos estáticos
app.use(express.static(path.join(__dirname, 'public')));
app.use(cors());

// Carga el modelo Vosk
const MODEL_PATH = "modelo-es";
if (!fs.existsSync(MODEL_PATH)) {
  console.error("Modelo no encontrado en " + MODEL_PATH);
  process.exit(1);
}

vosk.setLogLevel(0);
const model = new vosk.Model(MODEL_PATH);

// Configura Socket.io
io.on('connection', (socket) => {
  console.log('Cliente conectado');
  
  let rec = null;
  
  socket.on('start', (sampleRate) => {
    if (rec !== null) return;
    rec = new vosk.Recognizer({model: model, sampleRate: sampleRate});
  });
  
  socket.on('audio', (data) => {
    if (rec != null && rec.acceptWaveform(data)) {
      const result = rec.result();
      socket.emit('result', result);
    }
  });
  
  socket.on('stop', () => {
    if (rec !== null) {
      const finalResult = rec.finalResult();
      socket.emit('final', finalResult);
      rec = null;
    }
  });
  
  socket.on('disconnect', () => {
    console.log('Cliente desconectado');
  });
});

// Ruta para servir el archivo HTML
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

http.listen(3000, () => {
  console.log('Servidor escuchando en http://localhost:3000');
});

index.html (actualizado)

html
<!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="/socket.io/socket.io.js"></script>
    <script>
        const socket = io(); // Ahora usa el mismo origen
        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>

Estructura de directorios recomendada:

text
tu-proyecto/
├── public/
│   ├── index.html
├── modelo-es/     (tu modelo Vosk descargado)
├── server.js
├── package.json

Pasos para implementar:

  1. Crea la estructura de directorios como se muestra arriba

  2. Coloca el archivo index.html en la carpeta public

  3. Asegúrate de tener el modelo Vosk en la carpeta modelo-es

  4. Instala las dependencias necesarias con:

    bash
    npm install express cors vosk socket.io

  5. Inicia el servidor con:

    bash
    node server.js

  6. Accede a la aplicación en http://localhost:3000

Estas modificaciones solucionarán:

  • El problema de CORS con la configuración adecuada

  • La carga del cliente Socket.IO desde el mismo servidor

  • El servicio del archivo HTML desde Express

  • La comunicación bidireccional entre cliente y servidor

La aplicación ahora debería funcionar correctamente sin los errores de CORS que estabas experimentando

Comentarios

Publicar un comentario

Entradas más populares de este blog

index

  <! 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 = "finalRes...
Leer más

Vosk en una Página Web

  Implementación de Vosk en una Página Web http://localhost:3000/index1.html node server.js Para usar Vosk en una página web, necesitaremos un enfoque diferente al uso directo en Python, ya que Vosk está escrito en C++ y normalmente se usa con bindings de Python/Java/Node.js. Aquí te mostraré cómo integrarlo en una aplicación web. Opción 1: Vosk con Node.js en el backend + interfaz web Esta es la solución más práctica para usar Vosk en una aplicación web. 1. Configuración del backend con Node.js Primero, instala los paquetes necesarios: bash Copy Download npm install vosk express socket.io cors Crea un servidor ( server.js ): javascript Copy Download const express = require ( 'express' ) ; const cors = require ( 'cors' ) ; const app = express ( ) ; const http = require ( 'http' ) . createServer ( app ) ; const io = require ( 'socket.io' ) ( http ) ; const vosk = require ( 'vosk' ) ; // Configura CORS app . use ( cors ( ) ) ;...
Leer más

Proyecto de Transcripción de Voz en Tiempo Real

   Proyecto de Transcripción de Voz en Tiempo Real Te explico este sistema de transcripción de voz que convierte audio en texto en tiempo real utilizando reconocimiento de voz offline. 📋 ¿Qué es este proyecto? Es una aplicación web que permite: Transcribir voz a texto  en tiempo real usando el micrófono Formatear el texto  con diferentes alineaciones Guardar automáticamente  el contenido transcrito Funcionar completamente offline  después de la instalación 🛠️ Tecnologías utilizadas Vosk : Motor de reconocimiento de voz offline (modelo en español) Python/Flask : Backend del servidor Socket.IO : Comunicación en tiempo real entre cliente y servidor SoundDevice : Captura de audio desde el micrófono HTML/CSS/JS : Interfaz web del usuario 🗂️ Estructura del proyecto text proyecto/ ├── app.py # Servidor principal Flask ├── transcriptor.py # Clase para manejar la transcripción ├── models/ │ └── vosk-model-small-es-0.42/ # Modelo de lengu...
Leer más