Lector de Textos - PWA

Aplicación web progresiva (PWA) para leer textos en voz alta usando la Web Speech API nativa del navegador.

Características

• ✅ Textarea grande para pegar o escribir texto
• ✅ Controles de reproducción: Play, Pause, Stop
• ✅ Control de velocidad de lectura (0.5x a 2x)
• ✅ Diseño mobile-first, simple y limpio
• ✅ Funciona offline gracias al Service Worker
• ✅ Instalable como PWA en dispositivos móviles y desktop
• ✅ Soporte para voces en español (si están disponibles)

Instalación y Uso

Opción 1: Servidor Local Simple

1. Abre una terminal en la carpeta del proyecto
2. Ejecuta un servidor HTTP simple:

Python 3:

python3 -m http.server 8000

Node.js (con http-server):

npx http-server -p 8000

3. Abre tu navegador en http://localhost:8000

Opción 2: Servidor de Desarrollo

Para desarrollo, puedes usar cualquier servidor HTTP local. La aplicación requiere HTTPS o localhost para que el Service Worker funcione correctamente.

Generar Iconos

Los iconos son necesarios para que la PWA funcione correctamente. Tienes varias opciones:

Opción 1: Usar el Generador HTML

1. Abre generate-icons.html en tu navegador
2. Haz clic en los botones para descargar icon-192.png e icon-512.png
3. Coloca los archivos en la raíz del proyecto

Opción 2: Crear Iconos Manualmente

Crea dos archivos PNG:

• icon-192.png (192x192 píxeles)
• icon-512.png (512x512 píxeles)

Puedes usar cualquier herramienta de diseño (Figma, Photoshop, GIMP, etc.) o servicios online como:

• PWA Asset Generator
• RealFaviconGenerator

Opción 3: Usar Python con PIL

Si tienes Python y Pillow instalado:

pip install Pillow
python3 generate-icons.py

Instalación como PWA

En Chrome/Edge (Desktop):

1. Abre la aplicación en el navegador
2. Haz clic en el icono de instalación en la barra de direcciones
3. O ve a Menú → Instalar aplicación

En Chrome (Android):

1. Abre la aplicación en Chrome
2. Toca el menú (tres puntos)
3. Selecciona "Agregar a pantalla de inicio" o "Instalar aplicación"

En Safari (iOS):

1. Abre la aplicación en Safari
2. Toca el botón Compartir
3. Selecciona "Agregar a pantalla de inicio"

Uso

1. Pega o escribe el texto que quieres escuchar en el textarea
2. Ajusta la velocidad de lectura con el control deslizante (0.5x a 2x)
3. Haz clic en "Reproducir" para comenzar la lectura
4. Usa "Pausar" para pausar y "Detener" para detener completamente

Atajos de Teclado

• Espacio: Pausar/Reanudar (cuando el textarea no tiene foco)

Compatibilidad

• ✅ Chrome/Edge (Desktop y Android)
• ✅ Safari (iOS 14.5+)
• ✅ Firefox (con limitaciones en algunas plataformas)
• ⚠️ La Web Speech API puede tener diferentes voces disponibles según el sistema operativo

Estructura del Proyecto

lector-textos/
├── index.html          # Página principal
├── styles.css          # Estilos CSS
├── app.js              # Lógica de la aplicación
├── manifest.json       # Manifest de PWA
├── service-worker.js   # Service Worker para offline
├── icon-192.png        # Icono 192x192 (generar)
├── icon-512.png        # Icono 512x512 (generar)
├── generate-icons.html # Generador de iconos
└── README.md           # Este archivo

Notas Técnicas

• La aplicación usa la Web Speech API nativa del navegador
• El Service Worker cachea los recursos para funcionar offline
• Los textos se leen usando las voces disponibles en el sistema
• La aplicación detecta automáticamente voces en español si están disponibles

Personalización

Puedes personalizar los colores editando las variables CSS en styles.css:

:root {
    --primary-color: #2563eb;
    --secondary-color: #64748b;
    /* ... más variables */
}

Licencia

Este proyecto es de código abierto y está disponible para uso personal y comercial.