Voz con Vosk-micro

 

Explicación del Código de Reconocimiento de Voz con Vosk

http://localhost:3000/index1.html

node server.js



Este código HTML/JavaScript implementa una interfaz web para reconocimiento de voz utilizando el motor Vosk a través de una conexión con un servidor local.

Estructura Principal

  1. HTML Básico:

    • Define una página web con dos botones (Comenzar/Detener) y dos áreas para mostrar resultados.

    • Incluye estilos CSS básicos para la presentación.

  2. Conexión WebSocket:

    javascript
    const socket = io('http://localhost:3000');

    • Establece conexión con un servidor Socket.IO en localhost puerto 3000.

Funcionalidad de Audio

  1. Configuración de Audio (setupAudio()):

    • Crea un contexto de audio del navegador

    • Solicita acceso al micrófono del usuario

    • Configura un procesador de audio que:

      • Captura datos de audio en formato Float32

      • Los convierte a Int16 (formato esperado por Vosk)

      • Envía los datos al servidor a través de WebSocket

  2. Conversión de Formatos (convertFloat32ToInt16()):

    • Convierte los datos de audio de Float32 (usado por el navegador) a Int16 (necesario para Vosk)

Control de Flujo

  1. Botones:

    • Comenzar: Inicia la captura de audio, habilita el procesamiento y notifica al servidor

    • Detener: Detiene la captura y notifica al servidor

  2. Manejo de Resultados:

    • result: Muestra resultados parciales del reconocimiento (mientras el usuario habla)

    • final: Muestra el resultado final cuando se completa una frase

Comunicación con el Servidor

  • Eventos enviados:

    • start: Notifica al servidor que comienza la captura (con la tasa de muestreo)

    • audio: Envía los datos de audio en chunks

    • stop: Notifica que se detuvo la captura

  • Eventos recibidos:

    • result: Resultados parciales del reconocimiento

    • final: Resultado final procesado

Este código es el frontend que se complementa con un backend (que no se muestra) que utiliza el motor Vosk para convertir el audio en texto. El backend debe estar corriendo en localhost:3000 para que funcione.


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

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