{"id":671,"date":"2020-03-17T10:00:22","date_gmt":"2020-03-17T09:00:22","guid":{"rendered":"http:\/\/programaraciegas.net\/?p=671"},"modified":"2020-03-16T21:23:12","modified_gmt":"2020-03-16T20:23:12","slug":"como-leer-el-contenido-principal-de-una-pagina-con-web-speech-api","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=671","title":{"rendered":"Como leer el contenido principal de una p\u00e1gina con Web Speech API"},"content":{"rendered":"<p>En el art\u00edculo <a href=\"http:\/\/programaraciegas.net\/?p=663\">Haz hablar a tu web con Web Speech API<\/a> aprendimos a utilizar mediante Javascript la tecnolog\u00eda <strong>Web Speech API<\/strong> y ahora aprenderemos a crear un bot\u00f3n para nuestra web que al pulsarlo lea todo el contenido principal de la p\u00e1gina.<\/p>\n<p><!--more--><\/p>\n<h2>Nuestro objetivo<\/h2>\n<p>Para este art\u00edculo buscaremos crear una p\u00e1gina que muestre un texto y adem\u00e1s un bot\u00f3n que al pulsarlo verbalice todo ese contenido. Para conseguirlo nuestra funcionalidad para la p\u00e1gina debe realizar las siguientes operaciones:<\/p>\n<ol>\n<li>Obtener el texto principal de la p\u00e1gina<\/li>\n<li>Acceder a Web Speech API<\/li>\n<li>Verbalizar todo el contenido<\/li>\n<\/ol>\n<p>Para la realizaci\u00f3n de este ejemplo se requieren conocimientos de HTML y Javascript.<\/p>\n<h3>Identificando el contenido principal de la p\u00e1gina<\/h3>\n<p>En HTML5 existe la etiqueta <strong>ARTICLE<\/strong> la cual es un contenedor para el contenido principal de una p\u00e1gina. Utilizaremos esta etiqueta para identificar el contenido principal de la p\u00e1gina.<\/p>\n<h3>Obtener todo el texto de la etiqueta &lt;article&gt; con Javascript<\/h3>\n<p>En Javascript podemos utilizar la funci\u00f3n <em>getElementsByTagName<\/em> del objeto <em>document<\/em> para localizar la etiqueta <strong>ARTICLE<\/strong> por ejemplo de esta forma:<\/p>\n<p><code><\/code><\/p>\n<pre>\u2029var container = document.getElementsByTagName(\"article\")[0];\u2029<\/pre>\n<p>Una vez localizada la etiqueta <strong>ARTICLE<\/strong> podemos obtener el texto que contiene de la siguiente forma:<\/p>\n<p><code><\/code><\/p>\n<pre>\u2029var contentToSpeak = container.innerText;\u2029<\/pre>\n<p>Colocando todo esto en una funci\u00f3n de Javascript junto con la funci\u00f3n <em>speak<\/em> que vimos en el art\u00edculo sobre Web Speech API tenemos lo siguiente:<\/p>\n<p><code><\/code><\/p>\n<pre>\u2029&lt;script type=\"text\/javascript\"&gt;\u2029\tfunction speak(text, language) {\u2029\t\tvar s = new SpeechSynthesisUtterance(text);\u2029\t\ts.lang = language;\tspeechSynthesis.speak(s);\u2029\t}\u2029\tfunction speakArticle() {\u2029\t\tvar container = document.getElementsByTagName(\"article\")[0];\u2029\t\tvar contentToSpeak = container.innerText;\u2029\t\tspeak(contentToSpeak, 'es-es');\u2029\t}\u2029&lt;\/script&gt;\u2029<\/pre>\n<p>Una vez tengamos este c\u00f3digo Javascript s\u00f3lo debemos crear un bot\u00f3n que al pulsarlo ejecute la funci\u00f3n <em>speakArticle<\/em><\/p>\n<p>Podemos ver este ejemplo funcionando en <a href=\"http:\/\/www.programaraciegas.net\/files\/ejemplo2WebSpeech.htm\" target=\"_blank\" title=\"Ejemplo de Web Speech API (Abre en ventana nueva)\" rel=\"noopener noreferrer\">Ejemplo de Web Speech API generalizado<\/a> y recuerda consultar el c\u00f3digo de la p\u00e1gina de ejemplo para aprender m\u00e1s detalles.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En el art\u00edculo Haz hablar a tu web con Web Speech API aprendimos a utilizar mediante Javascript la tecnolog\u00eda Web Speech API y ahora aprenderemos a crear un bot\u00f3n para nuestra web que al pulsarlo lea todo el contenido principal de la p\u00e1gina.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[334,114,6],"tags":[329,333,327,328,94],"class_list":["post-671","post","type-post","status-publish","format-standard","hentry","category-javascript","category-navegadores-web","category-programacion","tag-api","tag-html","tag-javascript","tag-speech","tag-web"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=671"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/671\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}