Las voces sintéticas han permitido que personas ciegas accedan a la informatica de forma m\u00e1s f\u00e1cil y barata. Además estas voces tambi\u00e9n han permitido la aparici\u00f3n de nuevas formas de usar la tecnolog\u00eda y enriquecer la experiencia vivida por muchos usuarios a la hora de utilizar distintos dispositivos.<\/p>\n
El uso de motores de voz para enriquecer la experiencia de usuario se ha visto generalizado tanto en plataformas de escritorio como en plataformas para dispositivos m\u00f3viles. La Web tambi\u00e9n posee esta posibilidad gracias a Web Speech API<\/a><\/p>\n En este artículo veremos un ejemplo simple para saludar utilizando voz gracias a Web Speech API.<\/p>\n <\/p>\n Web Speech API permite a un navegador web acceder a características relacionadas con la voz. Esta API nos permite tanto reconocer texto hablado como verbalizar texto con las voces instaladas en nuestro equipo.<\/p>\n Para todo esto Web Speech API nos proporciona varias clases y funciones para poder programar nuestras funciones y comportamientos dentro de nuestras páginas web.<\/p>\n El problema con Web Speech API al igual que otras tecnologías de la Web es que no están completamente soportadas por todos los navegadores. Google Chrome, Mozilla Firefox y Apple Safari si soportan Web Speech API pero otros navegadores s\u00f3lo lo hacen parcialmente y en sus \u00faltimas versiones.<\/p>\n Gracias al lenguaje de programaci\u00f3n Javascript es posible extender la funcionalidad de una p\u00e1gina web e incorporar nuevas funcionalidades y caracter\u00edsticas. A diferencia de HTML y CSS Javascript si es un lenguaje de programación por lo que requiere especial atención a la hora de escribir las distintas líneas de código.<\/p>\n Hay multitud de cursos, tutoriales y material para aprender Javascript por lo que no lo trataremos en este artículo.<\/p>\n Lo mismo sucede con las tecnologías HTML. Este lenguaje de marcado de texto es indispensable para crear páginas web y es muy recomendable aprenderlo.<\/p>\n Para la realización del ejemplo propuesto en este artículo se debe tener unos conocimientos mínimos de HTML y Javascript.<\/p>\n Lo primero que debemos hacer es declarar una función que nos permita hacer uso de Web Speech API. Para ello declararemos una función llamada speak<\/strong> que nos permita utilizar la clase SpeechSynthesisUtterance<\/strong> de Web Speech API.<\/p>\n La clase SpeechSynthesisUtterance nos permite conectar el motor de voz de nuestro navegador web ajustando el texto que se debe verbalizar, el idioma a utilizar y otros parámetros como la velocidad, volumen y más.<\/p>\n <\/code><\/p>\n Este código es recomendable incluirlo en el head<\/em> de la página aunque si se hace en el body<\/em> de la página no supondría ningún problema de accesibilidad.<\/p>\n Ahora debemos crear en el body<\/em> de nuestra página un elemento para hacer hablar a nuestra página como puede ser un botó’n que al pulsarlo verbalice la frase Hola mundo!<\/em>. El código sería el siguiente:<\/p>\n <\/code><\/p>\nUsar Web Speech API gracias a Javascript<\/h2>\n
Incluir la funcionalidad<\/h3>\n
<\/p>\n\r\n<script type=\"text\/javascript\">\r\n\tfunction speak(text, language) {\r\n\t\tvar s = new SpeechSynthesisUtterance(text);\r\n\t\ts.lang = language;\tspeechSynthesis.speak(s);\r\n\t}\r\n<\/script>\r\n<\/pre>\nCreando un botón para saludar.<\/h3>\n
<\/p>\n\r\n<button onclick=\"speak('Hola mundo!', 'es-es');\">\r\nSaludar\r\n<\/button>\r\n<\/pre>\n