Blog de Gonzalo

CONVERTIR TEXTO A VOZ EN JAVASCRIPT

Para convertir texto a voz en javascript hay que usar el api speechSynthesis de javascript. Los nuevos navegadores tienen un sistema de síntesis de voz integrado, que permite "leer" textos en varios idiomas. Esto es algo muy interesante desde el punto de vista de la accesibilidad, ya que hay usuarios que no pueden acceder a una página sin la necesitad. No obstante, también son útiles a la hora de "leer" textos o utilizarlos para experimentos o juegos. Los métodos disponibles son:

  • speak: Añade el mensaje a la cola de mensajes por leer. Por ejemplo speak("hola esto es una prueba").
  • pause: Pausa la reproducción de voz y reproducción actual. Por ejemplo pause().
  • resume: Continua la reproducción de voz pausada previamente. Por ejemplo resume().
  • cancel: Cancela la reproducción actual y todas las que están en cola. Por ejemplo cancel().
También se puede consultar si el motor de síntesis de voz del navegador está pausado, tiene mensajes en cola o está actualmente reproduciendo un mensaje.
  • paused: Indica si la reproducción de voz se encuentra pausada. Por ejemplo speak("hola esto es una prueba").
  • pending: Indica si el sintetizador tiene frases pendientes. Por ejemplo pause().
  • speaking: Indica si el sintetizador se encuentra hablando actualmente. Por ejemplo resume().
Estos mensajes de voz también se pueden personalizar:
  • lang: Idioma que utilizará la api de voz. Por ejemplo, es-ES.
  • pitch: Indica el tono de la voz. Valor entre 0 y 2. Por defecto, 1.
  • rate: Indica la velocidad o ritmo de la voz. Valor entre 0 y 10. Por defecto, 1.
  • text: Indica el texto que leerá el sintetizador de voz.
  • volume: Indica el volumen del mensaje. Valor entre 0 y 1. Por defecto, 1.
  • voice: Referencia a la voz que se utilizará para el proceso de síntesis de voz.
Ejemplo básico:

function readOutLoud() {
  var speech = new SpeechSynthesisUtterance();

  // Set the text and voice attributes.
  speech.text = document.getElementById("output").value;
  speech.volume = 1;
  speech.rate = 1; //velocidad entre 0 y 10
  speech.pitch = 1; //Tono de voz entre 0 y 2

  window.speechSynthesis.speak(speech);
}
Donde "output"es un input de tipo "text" y un boton invoca a la función "readOutLoud".
Os aconsejo el artículo Convertir voz a texto

Compartir en twitter