Las voces sintéticas han permitido que personas ciegas accedan a la informatica de forma más fácil y barata. Además estas voces también han permitido la aparición de nuevas formas de usar la tecnología y enriquecer la experiencia vivida por muchos usuarios a la hora de utilizar distintos dispositivos.
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óviles. La Web también posee esta posibilidad gracias a Web Speech API
En este artículo veremos un ejemplo simple para saludar utilizando voz gracias a Web Speech API.
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.
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.
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ólo lo hacen parcialmente y en sus últimas versiones.
Usar Web Speech API gracias a Javascript
Gracias al lenguaje de programación Javascript es posible extender la funcionalidad de una página web e incorporar nuevas funcionalidades y características. 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.
Hay multitud de cursos, tutoriales y material para aprender Javascript por lo que no lo trataremos en este artículo.
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.
Para la realización del ejemplo propuesto en este artículo se debe tener unos conocimientos mínimos de HTML y Javascript.
Incluir la funcionalidad
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 que nos permita utilizar la clase SpeechSynthesisUtterance de Web Speech API.
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.
<script type="text/javascript">
function speak(text, language) {
var s = new SpeechSynthesisUtterance(text);
s.lang = language; speechSynthesis.speak(s);
}
</script>
Este código es recomendable incluirlo en el head de la página aunque si se hace en el body de la página no supondría ningún problema de accesibilidad.
Creando un botón para saludar.
Ahora debemos crear en el body 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!. El código sería el siguiente:
<button onclick="speak('Hola mundo!', 'es-es');">
Saludar
</button>
Puedes ver este ejemplo funcionando en Ejemplo de saludo con Web Speech API
Abre el código fuente de la página de ejemplo si tienes alguna duda.
Gracias por el post, muy interesante y enriquecedor.
SI bien es una ayuda que puede complementar a mejorar la accesibilidad de nuestro sitio, esto no es la solución para que las páginas web sean accesibles.
Buenas Javier, como comentas el uso de Web Speech API no es algo relacionado con la accesibilidad. Por esa razón en ninguna parte de este artículo así se indica. La única mención sobre accesibilidad se hace para indicar que el bloque de scripts es recomendable incluirlo en el head de la página aunque si no lo hacemos así tampoco repercute notablemente en la accesibilidad final que mostrará la página.
Hola. quisiera hacer que me lea por ejemplo, un articulo de blog. Encontré en otras webs que solo hacen esto para que lea un cuadro de edición al que previamente se le ingresa texto y con esto se hace que el navegador lo lea en voz alta. Y ya que estamos, puedes recomendarme páginas donde aprender sobre javascript de forma accesible? ya que lo queencuentro siempre carece de la explicación clara sobre la sintaxis del código y así se hace bastante difícil comenzar. Gracias por este post es muy interesante.
Buenas Marcelo. Lo que pides, por lo que entiendo de tu comentario, ya lo publiqué en un artículo posterior a este. Lo puedes encontrar en http://programaraciegas.net/?p=671