Texto detectado por micrófono en JavaScript se agrega al HTML. Una línea por frase reconocida
Resumen: mostrar cómo usar la API de reconocimiento de voz (webkitSpeechRecognition) con JavaScript, de tal manera que el navegador pueda entender nuestra voz y pueda transcribirla (es decir, convertir voz a texto).
Me emociona hacer otro tutorial sobre las API de JS. Ya vimos cómo tomar una foto, grabar un vídeo, grabar audio o convertir texto a voz.
Ahora voy a mostrarte cómo usar el reconocimiento de voz en la web con JavaScript, de una manera fácil.
Por ahora esta API está disponible para Chrome tanto en escritorio como en móvil de Android pero si en el futuro se agrega a otros navegadores, actualizaré el post.
Veamos un primer ejemplo. Lo único que tenemos que hacer es crear una instancia de webkitSpeechRecognition:
let sr = new webkitSpeechRecognition();
Ahora debemos definir una función cuando haya resultados, para ello agregamos una función a onresult de nuestro objeto recién creado, así:
sr.onresult = resultado => {
// Aquí tenemos todos los resultados
console.log(resultado);
}Este método de onresult se va a estar invocando cada que se detecte que el usuario comienza y termina de hablar, es decir, que dice una frase u oración.
Por el momento solo estamos imprimiendo los resultados. Finalmente iniciamos el reconocimiento de voz en la web con:
sr.start();
Así que todo queda así:
let sr = new webkitSpeechRecognition();
sr.onresult = resultado => {
console.log(resultado);
}
sr.start();Al probarlo obviamente se nos va a pedir permiso para acceder al micrófono:
Después debemos hablar y en la consola se imprimirán los resultados:
Lo que realmente nos interesa para obtener la transcripción de voz a texto es la propiedad results, que es un arreglo que tiene otros arreglos. Normalmente vamos a acceder al último elemento del arreglo en la posición 0 y luego a transcript, pues es lo último que se escuchó pero ahora en forma de texto.
Si quieres prueba lo que te digo en este enlace.
Cuando se detecta que ya no hay voz o algo así, el reconocimiento se pausa y ya no se inicia nunca más. Además, en Android el reconocimiento solo funciona una vez y después se detiene.
Es por ello que debemos usar un truco y es que debemos escuchar el evento que indica que se detuvo el reconocimiento, y volverlo a iniciar.
Por lo tanto queda algo así:
let sr = new webkitSpeechRecognition();
sr.onresult = resultado => {
console.log(resultado);
}
sr.onend = () => {
// Simplemente iniciamos de nuevo ;)
sr.start();
};
// Y lo iniciamos por primera vez ;)
sr.start();Ahora veremos la segunda parte en donde ya vamos a interactuar con HTML y haremos que cada frase detectada se escriba en el documento, para ir viendo cómo es que hacemos un “dictado en la web” usando reconocimiento de voz.
Primero definimos nuestro HTML. Vamos a colocar el texto detectado en un párrafo así que le ponemos un id para después obtener una referencia al mismo con querySelector.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Reconocimiento de voz con JS</title>
</head>
<body>
<h1>Reconocimiento de voz en la web</h1>
<a href="//parzibyte.me/blog">By parzibyte</a>
<p id="texto"></p>
<script src="script.js"></script>
</body>
</html>Ahora vemos el script. Accedemos al último elemento del arreglo de arreglos y después al primer elemento para finalmente tener a transcript. Después, agregamos un salto de línea y el texto detectado al párrafo:
let sr = new webkitSpeechRecognition();
// El elemento del DOM en donde vamos a colocar lo escuchado
const $texto = document.querySelector("#texto");
sr.onresult = resultado => {
let indiceUltimoElemento = resultado.results.length - 1;
let textoEscuchado = resultado.results[indiceUltimoElemento][0].transcript;
// Concatenamos el HTML
$texto.innerHTML += "<br>" + textoEscuchado;
}
sr.onend = () => {
// Simplemente iniciamos de nuevo ;)
sr.start();
};
// Y lo iniciamos por primera vez ;)
sr.start();Lo he probado en mi teléfono pues el micrófono de mi portátil no es tan bueno; aquí los resultados:
Si quieres puedes probarlo aquí.
No se puede usar el reconocimiento de voz fuera de línea u offline, pues al menos la API de webkitSpeechRecognition funciona con reconocimiento en la nube así que requiere internet.
Una vez que tenemos el texto podemos ejecutar funciones, es decir, podríamos definir comandos de voz y realizar determinada acción.
Por el momento solo funciona con Chrome; esperemos que en el futuro se agregue a más navegadores.
Sería interesante combinar esta tecnología con expresiones regulares o comandos, y el texto a voz para hacer algo como un asistente que te hable y escuche; ¡Todo en la web!
Muy pronto traeré más tutoriales sobre esto, mientras tanto te invito a suscribirte o a ver el repositorio en GitHub.
Actualización: mira cómo usar annyang para definir comandos de voz.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
