Síntesis de voz en Javascript!

Dale voz a tu sitio web.

Síntesis de voz en Javascript!

En el artículo anterior logramos hacer que nuestros sitios web entendieran nuestra voz, hoy intentaremos hacer que hablen con nosotros, leyendo el texto que les ingresemos, abriendo la puerta para que desarrolles estructuras lógicas más complejas que permitan conversaciónes fluidas con tu aplicación.

Puedes probar el resultado final del ejemplo de síntesis de voz en Javascript (Codepen)

1 - Crear un area de texto y un botón que envíe la orden de leer

<textarea id="textoParaLeer" cols="70" rows="10"></textarea>
<button onclick="leer()">LEER</button>

2 - Crear la función de leer

• 2.1 Creamos un objeto de tipo 'enunciado' (utterance en inglés) instanciando la API de síntesis de voz

const leer = ()=>{
  /* 2.1 */
  const u = new SpeechSynthesisUtterance();
}

• 2.2 Asignamos el texto del enunciado, en este caso primero intenta leer el area de texto y si está vacía asigna el mensaje: 'Escribe un texto primero'

const leer = ()=>{
  const u = new SpeechSynthesisUtterance();
  /* 2.2 */
  u.text = document.getElementById('textoParaLeer').value.trim() || 'Escribe un texto primero';
}

• 2.3 Hacemos que hable

const leer = ()=>{
  const u = new SpeechSynthesisUtterance();
  u.text = document.getElementById('textoParaLeer').value.trim() || 'Escribe un texto primero';
  /* 2.3 */
  speechSynthesis.speak(u);
}

Y Listo! Ya tenemos aplicaciones web capaces de leer texto en sólo 5 líneas de javascript y dos botones html (sin los comentarios)

Nota: Los navegadores bloquean cualquier intento programático de emitir sonidos mientras que el usuario no haya interactuado con la aplicación primero (es decir entre el momento de carga de la página y el primer click del usuario dentro de ella), por esto recomiendo que la síntesis de voz se ejecute luego de un click como en el botón que vimos arriba.

Créditos: Fotografía del banner por Fitore Fazliu desde Unsplash