Haz hablar a tu web con Web Speech API

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&oacute’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.

2 respuestas a «Haz hablar a tu web con Web Speech API»

  1. 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.

    1. 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.

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.