Componentes reutilizables

AGESIC

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