Voz a Texto Gratis: Cómo Construí una App de Transcripción sin APIs de Pago

Repositorio open source: speech-text-free-google en GitHub

Pruébalo en vivo: voicenotes.lalogarciaai.com

¿Cuánto pagas al mes por transcribir audio a texto? Google Cloud Speech-to-Text cobra por minuto. Whisper requiere GPU o una API de OpenAI. AssemblyAI, Deepgram, Rev — todos tienen pricing por uso.

Yo construí una alternativa completamente gratis usando una API que ya tienes en tu navegador: la Web Speech API de Chrome. Sin API keys. Sin costos. Sin límites.

Y el proyecto es open source para que lo uses, lo modifiques y lo despliegues donde quieras.

¿Qué es la Web Speech API?

La Web Speech API es una interfaz nativa del navegador que permite dos cosas:

1. Speech Recognition — Convertir voz a texto en tiempo real
2. Speech Synthesis — Convertir texto a voz (text-to-speech)

Lo importante: no necesitas API keys. No necesitas crear cuentas en Google Cloud, AWS ni Azure. El navegador ya tiene esta capacidad integrada.

// Así de simple es iniciar reconocimiento de voz
const recognition = new webkitSpeechRecognition();
recognition.lang = 'es-MX';
recognition.continuous = true;
recognition.interimResults = true;

recognition.onresult = (event) => {
  const transcript = event.results[event.resultIndex][0].transcript;
  console.log(transcript);
};

recognition.start();

Con estas pocas líneas ya tienes transcripción de voz a texto funcionando. Pero una app real necesita mucho más que eso.

Qué construí: VoiceNotes

VoiceNotes es una app web completa de notas por voz que convierte todo lo que dices en texto organizado. No es solo un demo — es una herramienta funcional que uso todos los días.

Funcionalidades principales

• Transcripción en tiempo real — Ves el texto aparecer mientras hablas
• Visualización de audio — Waveform animado que muestra la actividad de tu micrófono
• Organización por proyectos — Agrupa tus notas con colores y categorías
• Búsqueda — Encuentra cualquier nota por título o contenido
• Exportar — Descarga notas individuales como .txt o exporta todo en Markdown
• Copiar y compartir — Botones de acción rápida en cada nota
• Modo oscuro — Toggle persistente para trabajar de noche
• Multi-idioma — Selecciona español, inglés u otros idiomas
• Pausa y reanuda — Controla la grabación sin perder el contexto
• Contador de palabras y timer — Métricas en tiempo real

Sin backend, sin base de datos

Toda la persistencia vive en LocalStorage. Tus notas se guardan directamente en tu navegador. No hay servidor que almacene tus datos, lo que significa privacidad total.

La arquitectura técnica

El stack es intencionalmente minimalista:

¿Por qué vanilla JavaScript?

Porque para esta app no necesitas React, Vue ni ningún framework. La Web Speech API es una API del navegador. El DOM manipulation es directo. Y el resultado es una app que pesa kilobytes, no megabytes.

Sin node_modules. Sin build step. Sin bundler. Abres el HTML y funciona.

Cómo funciona la transcripción

El flujo de la Web Speech API tiene sutilezas importantes que aprendí construyendo esta app:

1. Manejo de dispositivos móviles vs desktop

Android Chrome no soporta bien el modo continuous de la Web Speech API. La solución: detectar el dispositivo y usar single-shot con auto-restart en móviles.

// Detección de plataforma
const isAndroid = /android/i.test(navigator.userAgent);
const isMobile = /mobile/i.test(navigator.userAgent);

if (isAndroid) {
  // Single-shot + auto-restart para Android
  recognition.continuous = false;
} else {
  recognition.continuous = true;
}

2. Resultados parciales (interim) vs finales

La Web Speech API emite resultados parciales mientras hablas y resultados finales cuando detecta una pausa. Manejar ambos es clave para una buena experiencia:

recognition.onresult = (event) => {
  let interimTranscript = '';
  let finalTranscript = '';

  for (let i = event.resultIndex; i < event.results.length; i++) {
    const transcript = event.results[i][0].transcript;
    if (event.results[i].isFinal) {
      finalTranscript += transcript;
    } else {
      interimTranscript += transcript;
    }
  }
};

3. Visualización del audio

La app usa la Web Audio API para capturar datos de frecuencia del micrófono y renderizar un waveform en Canvas. En dispositivos donde el acceso directo al audio no está disponible, usa una animación de barras con funciones seno como fallback.

Despliega tu propia instancia

El proyecto está listo para deploy con Docker. Así de fácil:

Opción 1: Docker Compose (recomendado)

# Clona el repositorio
git clone https://github.com/elalo4171/speech-text-free-google.git
cd speech-text-free-google

# Levanta el contenedor
docker-compose up -d

Tu app estará corriendo en http://localhost:3000.

Opción 2: Servir archivos estáticos

Como es HTML + CSS + JS puro, puedes servir los archivos con cualquier servidor web:

# Con Python
python3 -m http.server 8000

# Con Node.js
npx serve .

# Con PHP
php -S localhost:8000

Opción 3: Usar la versión live

Si solo quieres usarla sin instalar nada, ve directo a voicenotes.lalogarciaai.com.

Configuración de Nginx incluida

El proyecto incluye una configuración de Nginx optimizada con:

• Rate limiting — 10 requests/segundo por IP para prevenir abuso
• Headers de seguridad — Protección contra clickjacking, XSS y MIME sniffing
• Cache de assets — 7 días de expiración para archivos estáticos
• Compresión Gzip — Reducción del tamaño de transferencia
• Bloqueo de bots — User agents de scrapers bloqueados automáticamente

Comparativa: Web Speech API vs alternativas de pago

¿Cuándo usar la Web Speech API?

• Notas personales y transcripción rápida
• Prototipos y MVPs que necesitan voz a texto
• Proyectos donde no quieres pagar por transcripción
• Apps donde la privacidad es importante
• Dictado de texto en tiempo real

¿Cuándo usar una API de pago?

• Necesitas transcribir archivos de audio pregrabados
• Requieres precisión médica o legal
• Necesitas procesamiento en lote (batch)
• Tu app debe funcionar en todos los navegadores incluyendo Firefox

Seguridad y privacidad

Este punto es importante: la Web Speech API de Chrome sí envía el audio a los servidores de Google para procesarlo. No es procesamiento 100% local (a diferencia de Whisper que puede correr offline).

Sin embargo, la diferencia clave es:

1. No necesitas cuenta ni API key — No hay asociación directa con tu identidad
2. Las notas se guardan localmente — Solo en tu navegador, no en ningún servidor
3. El código es open source — Puedes auditar exactamente qué hace la app
4. Sin tracking — La única analítica opcional es Umami (self-hosted y respetuoso con la privacidad)

Contribuye al proyecto

El repositorio está abierto para contribuciones: github.com/elalo4171/speech-text-free-google

Ideas para contribuir:

• Soporte para más navegadores
• Exportación a formatos adicionales (PDF, DOCX)
• Sincronización entre dispositivos
• PWA para instalación como app nativa
• Integración con servicios de notas existentes

Conclusión

No siempre necesitas pagar por servicios de IA. La Web Speech API es una herramienta poderosa y gratuita que ya está en tu navegador. Con unas pocas líneas de JavaScript puedes construir una app de transcripción de voz a texto que funciona en tiempo real.

VoiceNotes es la prueba de que puedes construir herramientas útiles con tecnología web estándar — sin frameworks pesados, sin APIs de pago, sin configuración compleja.

Clona el repo. Despliégalo. Úsalo. Y si te gusta, dale una estrella en GitHub.