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:
- Obtener el texto principal de la página
- Acceder a Web Speech API
- 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.
Y como se crea ese boton
He logrado crear el boton para qie hable… cosa que no lo tienes en la explicacion.
Pero no se silencia y me gustaría saber si se puede crear un botón para que el habla deje de funcionar… para que se silencie… en la página principal pise ese ext to speech…
Gracias de antemano por tu colaboración.