La nueva API de Web Speech de JavaScript facilita la adición de reconocimiento de voz a tus páginas web. Esta API permite un control preciso y flexibilidad sobre las funciones de reconocimiento de voz en Chrome 25 y versiones posteriores. Este es un ejemplo en el que el texto reconocido aparece casi de inmediato mientras se habla.
Veamos qué hay debajo de la superficie. Primero, verificamos si el navegador admite la API de Web Speech comprobando si existe el objeto webkitSpeechRecognition. De lo contrario, sugerimos que el usuario actualice su navegador. (Dado que la API aún es experimental, actualmente tiene un prefijo de proveedor). Por último, creamos el objeto webkitSpeechRecognition que proporciona la interfaz de voz y configuramos algunos de sus atributos y controladores de eventos.
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
...
El valor predeterminado de continuous es falso, lo que significa que, cuando el usuario deje de hablar, finalizará el reconocimiento de voz. Este modo es ideal para texto simple, como campos de entrada cortos. En esta demo, lo configuramos como verdadero para que el reconocimiento continúe incluso si el usuario hace una pausa mientras habla.
El valor predeterminado de interimResults es "false", lo que significa que los únicos resultados que muestra el reconocedor son finales y no cambiarán. La demostración lo establece como verdadero para que obtengamos resultados provisionales anticipados que pueden cambiar. Mira la demostración con atención. El texto gris es el texto provisional que, a veces, cambia, mientras que el texto negro son respuestas del identificador que se marcan como definitivas y no cambiarán.
Para comenzar, el usuario hace clic en el botón del micrófono, que activa este código:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Establecemos el idioma hablado para el "lang" del identificador de voz en el valor BCP-47 que el usuario seleccionó a través de la lista desplegable de selección, por ejemplo, "en-US" para inglés (Estados Unidos). Si no se establece, se establece de forma predeterminada el lang del elemento raíz y la jerarquía del documento HTML. El reconocimiento de voz de Chrome admite varios idiomas (consulta la tabla "langs" en la fuente de la demostración), así como algunos idiomas de derecha a izquierda que no se incluyen en esta demostración, como he-IL y ar-EG.
Después de configurar el idioma, llamamos a recognition.start() para activar el reconocedor de voz. Una vez que comienza a capturar audio, llama al controlador de eventos onstart y, luego, para cada conjunto nuevo de resultados, llama al controlador de eventos onresult.
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
Este controlador concatena todos los resultados recibidos hasta el momento en dos cadenas: final_transcript y interim_transcript. Las cadenas resultantes pueden incluir "\n", como cuando el usuario dice "párrafo nuevo", por lo que usamos la función linebreak para convertirlas en etiquetas HTML <br> o <p>. Por último, establece estas cadenas como el innerHTML de sus elementos <span> correspondientes: final_span, que tiene el estilo de texto negro, y interim_span, que tiene el estilo de texto gris.
interim_transcript es una variable local y se vuelve a compilar por completo cada vez que se llama a este evento porque es posible que todos los resultados provisionales hayan cambiado desde el último evento onresult. Podríamos hacer lo mismo para final_transcript simplemente comenzando el bucle for en 0. Sin embargo, como el texto final nunca cambia, hicimos que el código aquí sea un poco más eficiente convirtiendo final_transcript en una variable global, de modo que este evento pueda iniciar el bucle for en event.resultIndex y solo agregar cualquier texto final nuevo.
Eso es todo. El resto del código está ahí solo para que todo se vea bien. Mantiene el estado, le muestra al usuario algunos mensajes informativos y cambia la imagen GIF en el botón del micrófono entre el micrófono estático, la imagen de micrófono con una barra y el micrófono animado con el punto rojo intermitente.
La imagen de micrófono con barra se muestra cuando se llama a recognition.start() y, luego, se reemplaza por mic-animate cuando se activa onstart. Por lo general, esto sucede tan rápido que no se nota la barra, pero la primera vez que se usa el reconocimiento de voz, Chrome debe pedirle permiso al usuario para usar el micrófono. En ese caso, onstart solo se activa cuando el usuario permite el permiso. Las páginas alojadas en HTTPS no necesitan solicitar permiso de forma reiterada, mientras que las páginas alojadas en HTTP sí.
Así que haz que tus páginas web cobren vida permitiéndoles escuchar a tus usuarios.
Nos encantaría recibir tus comentarios…
- Para enviar comentarios sobre la especificación de la API de Web Speech del W3C, usa correo electrónico, archivo de distribución o grupo de la comunidad.
- Para enviar comentarios sobre la implementación de esta especificación en Chrome, envía un correo electrónico o un archivo de correo.
Consulta el Informe de privacidad de Chrome para obtener información sobre cómo Google maneja los datos de voz de esta API.