DesarrolloLibre

Desarrollo Web, Android y mucho más

10-12-2015

Ya hace un tiempo que vienen apareciendo asistentes como Siri, Google Now o Cortana que entre varias funciones que prestan esta la del reconocimiento de voz y otras aplicaciones como Google Translator que cuenta con un sistema de síntesis de voz para distintos idiomas.

Gracias a HTML5 que provee una API que nos ofrece a los desarrolladores la posibilidad de trabajar con el reconocimiento de voz y la síntesis de voz de una manera sencilla y cuyo uso nos resulta similar a las demás APIs existentes en JavaScript.

Ya tenemos la mitad de la tarea realizada

En una entrada anterior hemos hablado un poco sobre la Web Speech API empleando el reconocimiento voz (speechRecognition()) en JavaScript la cual da la capacidad a nuestras aplicaciones de reconocer la voz según el idioma configurado a través del micrófono de la PC o dispositivo móvil:

La clase SpeechSynthesisUtterance permite capturar textos y convertirlos en audio.

Ahora falta explicar cómo podemos hacer lo contrario que resulta en, dado un texto reproducir el audio en el idioma configurado mediante la API de síntesis de voz en JavaScript la cual también forma parte de la Web Speech API.

Como se indicó en un comienzo, es realmente sencillo usar la API de Web Speech para que el navegador nos "hable" en base a la configuración previa mediante la API de síntesis de voz; el código mínimo necesario sería algo como esto:

var speechSynthesisUtterance = new SpeechSynthesisUtterance('Hola'); 
window.speechSynthesis.speak(speechSynthesisUtterance);

Como vemos, primero creamos una instancia de la clase SpeechSynthesisUtterance pasando como parámetro el texto que será "hablado" por el navegador y procesamos este objeto mediante la interfaz speechSynthesis que es la que finalmente hará "hablar" al navegador.

Propiedades de la clase SpeechSynthesisUtterance

La clase SpeechSynthesisUtterance contiene una serie de métodos, propiedades, etc; que permiten establecer cómo el navegador "hablará"; una de ellas es la text que permite establecer/obtener el texto que será capturado al momento de que nuestro navegador nos habla mediante la API de síntesis de voz.

Aunque existen otros atributos que permiten personalizar un poco más vários aspectos de la clase SpeechSynthesisUtterance.

Como todas las APIs, la clase SpeechSynthesisUtterance cuenta con una serie de propiedades con las cuales podemos configurar varias cosas aparte del texto; entre las más importantes tenemos el idioma, volumen, voz, tono, velocidad, etc.

SpeechSynthesisUtterance.lang

Esta viene siendo también una de las propiedades más importantes y permite establecer u obtener el idioma del texto presentado para la API de síntesis de voz.

SpeechSynthesisUtterance.pitch

Permite establecer/obtener el tono de voz; el valor real (flotante) comprendido está entre cero (para el más bajo) y dos (para el más alto).

SpeechSynthesisUtterance.rate

Permite establecer la velocidad en la que "hablará" el navegador; el valor real (flotante) comprendido está entre cero punto uno (para el más bajo) y diez (para el más alto).

SpeechSynthesisUtterance.text

Esta viene siendo la propiedad más importante de todas, y es la que permite establecer u obtener el texto con el cual queremos que nuestro navegador nos hable.

SpeechSynthesisUtterance.volume

Establece u obtiene el volumen de la voz representado por un valor real (flotante) comprendido entre cero (para el más bajo) y uno (para el más alto).

Eventos manejadores

Puedes ver todos los eventos de la API de la síntesis de voz en la documentación oficial en el siguiente enlace; aunque entre los que se pueden considerar más importantes o usados tenemos:

peechMessage.onstart = function(e) {
  console.log('Hablando...');
};
 
speechMessage.onend = function(e) {
  console.log('Finalizado.');
};

Soporte de los navegadores

Para verificar el soporte de los navegadores basta con emplear el siguiente código:

if ('speechSynthesis' in window) {
// hay soporte de la SpeechSynthesisUtterance
}

Poniéndolo todo junto. Ejemplo de síntesis de voz

Aunque al igual que casi siempre, un sencillo ejemplo sirve para entender mejor cada una de las propiedades y eventos manejadores de la API de la síntesis de voz vistos anteriormente.

Ayúdanos a seguir creciendo

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

API REST en CodeIgniter

API REST en CodeIgniter

Calendario de cubo

Calendario de cubo

Eye Candy

Eye Candy

Algunos artículos que te pueden interesar

Funciones declarativas vs Funciones de expresiones en JavaScript

Funciones declarativas vs Funciones de expresiones en JavaScript

El compilador de JavaScript coloca las funciones de declarativas en un ámbito global a todo el programa al contrario de las funciones de expresión que solo corresponde a una sección definida del programa.

Andrés Cruz 25-05-2015

¿Cómo publicar un post en nuestro muro con la API Graph API de Facebook (PHP)?

¿Cómo publicar un post en nuestro muro con la API Graph API de Facebook (PHP)?

Explicamos como obtener los tokens de autenticación desde la página de desarrolladores de Facebook, descargar la SDK de Facebook para PHP, solicitar los permisos, autenticarse y publicar un post en el muro de Facebook.

Andrés Cruz 27-06-2016

¿Cómo crear un punto luminoso con JavaScript y Canvas?

¿Cómo crear un punto luminoso con JavaScript y Canvas?

Explicamos cómo crear un punto luminoso con HTML, JavaScript y Canvas.

Andrés Cruz 05-11-2015