Como leer el contenido principal de una página con Web Speech API

En el artículo Haz hablar a tu web con Web Speech API aprendimos a utilizar mediante Javascript la tecnología Web Speech API y ahora aprenderemos a crear un botón para nuestra web que al pulsarlo lea todo el contenido principal de la página.

Nuestro objetivo

Para este artículo buscaremos crear una página que muestre un texto y además un botón que al pulsarlo verbalice todo ese contenido. Para conseguirlo nuestra funcionalidad para la página debe realizar las siguientes operaciones:

  1. Obtener el texto principal de la página
  2. Acceder a Web Speech API
  3. Verbalizar todo el contenido

Para la realización de este ejemplo se requieren conocimientos de HTML y Javascript.

Identificando el contenido principal de la página

En HTML5 existe la etiqueta ARTICLE la cual es un contenedor para el contenido principal de una página. Utilizaremos esta etiqueta para identificar el contenido principal de la página.

Obtener todo el texto de la etiqueta <article> con Javascript

En Javascript podemos utilizar la función getElementsByTagName del objeto document para localizar la etiqueta ARTICLE por ejemplo de esta forma:


var container = document.getElementsByTagName("article")[0];


Una vez localizada la etiqueta ARTICLE podemos obtener el texto que contiene de la siguiente forma:


var contentToSpeak = container.innerText;


Colocando todo esto en una función de Javascript junto con la función speak que vimos en el artículo sobre Web Speech API tenemos lo siguiente:


<script type="text/javascript">
	function speak(text, language) {
		var s = new SpeechSynthesisUtterance(text);
		s.lang = language;	speechSynthesis.speak(s);
	}
	function speakArticle() {
		var container = document.getElementsByTagName("article")[0];
		var contentToSpeak = container.innerText;
		speak(contentToSpeak, 'es-es');
	}
</script>


Una vez tengamos este código Javascript sólo debemos crear un botón que al pulsarlo ejecute la función speakArticle

Podemos ver este ejemplo funcionando en Ejemplo de Web Speech API generalizado y recuerda consultar el código de la página de ejemplo para aprender más detalles.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.