Componente lector de textos

Este documento describe la implementación de un lector de texto en un sitio web utilizando la API de SpeechSynthesis de JavaScript. La funcionalidad presentada permite a los usuarios escuchar el contenido textual de una página web. Este sistema ofrece la posibilidad de leer texto, pausar, reanudar y reiniciar la lectura.

Descripción del Sistema

Funcionalidades Principales

  • Leer texto: Divide el contenido en fragmentos y los reproduce utilizando la API SpeechSynthesis.
  • Pausar y reanudar la lectura: Permite detener temporalmente la lectura y continuar desde el punto de pausa.
  • Reiniciar la lectura: Cancela cualquier lectura en progreso y reinicia desde el principio.
  • Automatización del flujo de lectura: Al finalizar un fragmento, el sistema pasa automáticamente al siguiente después de una breve pausa.
  • Manejo de navegación: Detiene la lectura si el usuario intenta abandonar la página.

Cómo incorporar Text-to-Speech en un sitio web

Una vez vinculado el javascript del TTS, se debe asignar el id="TTS" al div que contenga el contenido de la página que desea ser leído.

Configuración Avanzada

  • Cambiar idioma: Modifica el valor de utterance.lang según el idioma deseado (por ejemplo, en-US para inglés).
  • Personalizar voz: Usa speechSynthesis.getVoices() para listar las voces disponibles en el navegador.

Cómo incorporar Text-to-Speech como Web Component

  • Descomprimir el zip del componente en una carpeta.
  • Incluir en el <head> de tu archivo HTML los siguientes scripts: wcfManage.js y texto-a-voz.js
  • Colocar el texto que se desea leer dentro de un elemento <div> con el atributo id="TTS".
  • Pegar el siguiente código en la página donde se quiera usar el componente:
    <comp-texto-a-voz id="comp-texto-a-voz"></comp-texto-a-voz>

Descargas