La API de SpeechSynthesis de javascript nos permite reproducir voz apartir de texto directamente en el navegador, esto nos permite mejorar nuestras aplicaciones, notificaciones y mejor accesibilidad.
💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.
Para usar la API es facil y es compatible con la mayoria de los navegadores modernos, google chrome, Microsoft Edge, Safari y Firefox entre otros.
El siguiente es el ejemplo mas basico que donde podemos usar la funcion speak.
speechSynthesis.speak(
new SpeechSynthesisUtterance("Hola que tal?")
);La funcion speechSynthesis.speak(parametro) tiene como parametro un objeto SpeechSynthesisUtterance, el cual contiene la informacion, texto, voz, velocidad, volumen, lenguaje.
Si no se asigna ninguna configuracion al SpeechSynthesisUtterance se usan los valores por default, los cuales son, idioma en ingles, velocidad normal 1, volumen normal, etc.
En el siguiente ejemplo muestro mas detalladamente como se configura un SpeechSynthesisUtterance, una vez creado el objeto SpeechSynthesisUtterance se debe pasar como parametro ala funcion speak de speechSynthesis
utterance1 = new SpeechSynthesisUtterance("Vamos a programar en Javascript!");
utterance1.voice = speechSynthesis.getVoices()[8];
utterance1.pitch = 1;
utterance1.rate = 1.5
speechSynthesis.speak(
utterance1
);Como ultimo ejemplo de este tema voy a crear un campo de texto y un boton y al presionar el boton vamos a convertir a voz el contenido del campo de texto.
Codigo
<html>
<head>
<title>Texto a Voz - Evilnapsis</title>
</head>
<body>
<h1>Texto a Voz - Evilnapsis</h1>
<input type="text" id="mitexto">
<button id="reproducir">Reproducir</button>
<script>
btn1 = document.getElementById("reproducir"); // boton reproducir
texto = document.getElementById("mitexto"); // campo de texto
var textdefault = "No hay Texto"; // Texto por default en caso de no escribir nada
btn1.onclick = function(){
if(texto.value!=""){ textdefault=texto.value; } // Si hay contenido en la caja de texto entonces se guarda
/* configuramos los parametros de la voz */
utterance1 = new SpeechSynthesisUtterance(textdefault);
utterance1.voice = speechSynthesis.getVoices()[8];
utterance1.pitch = 1;
utterance1.rate = 1.5
/* hablamos */
speechSynthesis.speak(
utterance1
);
texto.value = ""; // eliminamos el contenido de la caja de texto
}
</script>
</body>
</html>Ahora solo tienen que copiar el codigo y guardarlo con extension .html por ejemplo textoavoz.html a brir en el navegador y listo.
Para correr el ejemplo no es necesario usar xampp, ni ningun servidor, el navegador solamente.
¿Necesitas un software de ventas listo para producción?
Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.
Ver Inventio Max – Sistema de Inventario y Ventas Profesional →