Lector de páginas Snippet HTML WordPress V1.0

<style>
#lectorBtn {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 6px 14px;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  font-size: 14px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
  display: none;
}
#lectorBtn:hover {
  background-color: #222;
}
#lectorIcon {
  font-size: 16px;
}
</style>

<button id="lectorBtn" onclick="toggleLectura()" disabled>
  <span id="lectorIcon">🗣️</span>
  <span id="lectorTexto">Cargando...</span>
</button>

<script>
let palabras = [];
let palabraActualGlobal = 0; // Índice global de palabra actual
let leyendo = false;
let procesando = false;
let speech;
const maxPalabrasPorBloque = 20;
let ultimoBloqueLeido = 0; // Guarda el último bloque leído

function dividirTextoEnPalabras(texto) {
  return texto.split(/\s+/).filter(palabra => palabra.length > 0);
}

function iniciarLecturaDesdePosicion() {
  if (palabraActualGlobal >= palabras.length) {
    // Si llegamos al final, reiniciamos
    palabraActualGlobal = 0;
    ultimoBloqueLeido = 0;
    detenerLectura();
    return;
  }

  // Calcula el bloque actual basado en la posición global
  const bloqueActual = Math.floor(palabraActualGlobal / maxPalabrasPorBloque);
  const inicioBloque = bloqueActual * maxPalabrasPorBloque;
  const finBloque = Math.min(inicioBloque + maxPalabrasPorBloque, palabras.length);
  
  const textoBloque = palabras.slice(inicioBloque, finBloque).join(" ");

  speech = new SpeechSynthesisUtterance(textoBloque);
  speech.lang = 'es-CL';

  speech.onstart = () => {
    actualizarBoton("Detener lectura", "🔇");
    leyendo = true;
    ultimoBloqueLeido = bloqueActual; // Guardamos el bloque actual
  };

  speech.onend = () => {
    palabraActualGlobal = finBloque; // Actualizamos la posición global
    if (leyendo) {
      iniciarLecturaDesdePosicion();
    }
  };

  window.speechSynthesis.speak(speech);
}

function detenerLectura() {
  window.speechSynthesis.cancel();
  leyendo = false;
  actualizarBoton("Leer página", "🗣️");
}

function actualizarBoton(texto, icono) {
  document.getElementById("lectorTexto").textContent = texto;
  document.getElementById("lectorIcon").textContent = icono;
}

function toggleLectura() {
  const boton = document.getElementById("lectorBtn");

  if (procesando) return;

  if (!('speechSynthesis' in window)) {
    alert("Tu navegador no soporta lectura en voz.");
    return;
  }

  if (!leyendo) {
    if (palabras.length === 0) {
      const contenedor = document.querySelector('.entry-content') || document.querySelector('article') || document.body;
      const texto = contenedor ? contenedor.innerText.trim() : '';
      if (!texto) {
        alert("No hay texto para leer.");
        return;
      }
      palabras = dividirTextoEnPalabras(texto);
      palabraActualGlobal = 0;
      ultimoBloqueLeido = 0;
    } else {
      // Si ya hay palabras, calculamos la posición inicial del último bloque leído
      palabraActualGlobal = ultimoBloqueLeido * maxPalabrasPorBloque;
    }
    
    procesando = true;
    actualizarBoton("Cargando...", "⏳");
    boton.disabled = true;

    setTimeout(() => {
      procesando = false;
      boton.disabled = false;
      iniciarLecturaDesdePosicion();
    }, 300);
  } else {
    detenerLectura();
  }
}

window.addEventListener('load', function () {
  const boton = document.getElementById("lectorBtn");
  actualizarBoton("Leer página", "🗣️");
  boton.style.display = "flex";
  boton.disabled = false;
});
</script>

🗣️ Lector de Página: Escucha el contenido sin esfuerzo.

Nuestro sitio ahora incluye un lector de pantalla automático, ideal para quienes prefieren escuchar el contenido o tienen dificultades visuales.

🔧 ¿Cómo funciona?.

Encontrarás un botón fijo al final de la pantalla que dice:
“Leer contenido” o “Detener lectura”.
Al hacer clic, comenzará la lectura desde el principio del artículo (o desde donde la dejaste si pausaste antes).
El sistema lee bloques de texto pequeños (20 palabras), lo que asegura una voz más fluida y natural.
Si pausás, el sistema recuerda dónde se detuvo y al reiniciar continuará desde la misma palabra.

🚨 Requisitos

Funciona en navegadores modernos como Chrome, Firefox, Edge y Safari.
No requiere plugins ni permisos extra.
Si tu navegador no soporta esta función, recibirás un mensaje informativo.

Explicación Detallada del Funcionamiento del Lector de Voz Para WordPress.

1. Interfaz del Usuario

Botón flotante: Aparece centrado en la parte inferior de la pantalla
Diseño responsive: Se adapta a cualquier dispositivo
Estados visuales:
- 🗣️ “Leer página” (inactivo)
- 🔇 “Detener lectura” (activo)
- ⏳ “Cargando…” (procesando)

2. Proceso de Lectura

División del texto:
- Convierte el contenido en un array de palabras
- Filtra palabras vacías para mayor precisión
- Divide en bloques de 20 palabras cada uno
Control de flujo:
- Mantiene un índice global (palabraActualGlobal) para recordar la posición exacta
- Calcula dinámicamente los bloques basados en esta posición
- Al reanudar, continúa exactamente donde se quedó
Síntesis de voz:
- Usa la API Web Speech
- Configuración para español (es-CL)
- Procesamiento asíncrono para no bloquear la interfaz

3. Características Clave

Persistencia de posición: Recuerda dónde se detuvo incluso después de múltiples pausas
Reinicio automático: Al terminar el texto, se prepara para comenzar de nuevo
Optimización de rendimiento:
- No reprocesa el texto completo al reanudar
- Timeout mínimo (300ms) para evitar bloqueos

4. Compatibilidad

Funciona en la mayoría de navegadores modernos (Chrome, Edge, Firefox, Safari)
Requiere interacción del usuario para activarse (política de autoplay)
Degrada elegantemente en navegadores no compatibles (muestra alerta)

Recomendaciones para Uso en WordPress

Prueba en diferentes temas: Verifica que .entry-content coincida con la clase de tu tema
Considera plugins: Para mayor control, podrías implementarlo como:
- Shortcode
- Bloque personalizado
- Plugin específico
Optimiza el contenido: El lector funciona mejor con texto estructurado (evita muchos elementos interactivos)

✅ ¿Cómo implementarlo correctamente con Code Snippets?

1. 💡 Qué hace este snippet

Este código agrega un botón flotante fijo en la parte inferior de la pantalla, que:

Permite leer en voz alta el contenido de la página (sin encabezados, menús ni pies de página).
Usa la API SpeechSynthesis del navegador (no requiere servidores externos).
Divide el texto en bloques de 20 palabras para lograr una lectura más natural.
Retoma la lectura exactamente desde donde fue detenida.
Cambia de ícono y texto dinámicamente: 🗣️ “Leer página”, 🔇 “Detener lectura”, ⏳ “Cargando…”.

2. 🧩 Cómo agregarlo con el plugin Code Snippets

✅ Paso a paso:

Ve a tu WordPress > Plugins > Code Snippets (instálalo si no lo tienes).
Crea un nuevo snippet > selecciona tipo HTML (o JavaScript personalizado) si el plugin lo permite. Si no, este código debe insertarse como un snippet de tipo “Site-wide Footer” o “Frontend Only” si tu plugin lo permite.
Pega todo el bloque de código.

3. 📌 Notas importantes

Este código no guarda el progreso entre páginas. Si el usuario cambia de URL, la lectura empieza de nuevo.
Se puede personalizar el número de palabras por bloque cambiando maxPalabrasPorBloque.
Puedes modificar el ícono y colores desde el CSS al gusto.

4. ✅ Recomendación final

Agrega una pequeña nota en tu pie de página o en el menú de accesibilidad que diga algo como:

🎧 ¿Quieres escuchar el contenido? Pulsa el botón 🗣️ “Leer página” que aparece al final de la página.