La nueva API de Web Speech de JavaScript facilita la adición de reconocimiento de voz a tus páginas web. Esta API ofrece flexibilidad y control precisos sobre las capacidades de reconocimiento de voz de Chrome 25 y versiones posteriores. Este es un ejemplo en el que el texto reconocido aparece casi de inmediato mientras hablas.
Veamos esto en detalle. Primero, verificamos si el navegador es compatible con la API de Web Speech. Para ello, verificamos si el objeto webkitSpeechRecognition existe. De lo contrario, sugerimos que el usuario actualice el navegador. (Debido a que la API aún es experimental, actualmente tiene un prefijo del 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, el reconocimiento de voz finalizará. Este modo es ideal para texto simple, como campos de entrada cortos. En esta demostración, la configuramos como verdadera para que el reconocimiento continúe incluso si el usuario hace una pausa mientras habla.
El valor predeterminado para interimResults es falso, lo que significa que los únicos resultados que muestra el reconocedor son definitivos y no cambiarán. En la demostración, se establece como verdadera, por lo que obtenemos resultados provisionales que pueden cambiar. Mira la demostración detenidamente: el texto gris es el texto que es temporal y a veces cambia, mientras que el texto negro son respuestas del reconocedor 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();
Configuramos el idioma hablado del reconocedor de voz "lang". al valor BCP-47 que el usuario seleccionó en la lista desplegable de selección, por ejemplo, “en-US” para inglés de Estados Unidos. Si no la estableces, de forma predeterminada utilizará el idioma 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 demostración), así como algunos idiomas que se escriben de derecha a izquierda que no se incluyen en esta demostración, como he-IL y ar-EG.
Después de configurar el idioma, llamaremos a recognition.start() para activar el reconocedor de voz. Una vez que comienza a capturar audio, llama al controlador de eventos onstart y, para cada conjunto de resultados nuevo, 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 "nuevo párrafo", por lo que usamos la función linebreak para convertirlas en etiquetas HTML <br> o <p>. Por último, establece estas cadenas como el HTML interno de sus elementos <span> correspondientes: final_span, que tiene estilo de texto negro, y interim_span, que tiene texto gris.
interim_transcript es una variable local y se vuelve a compilar por completo cada vez que se llama a este evento, ya que es posible que todos los resultados provisionales hayan cambiado desde el último evento onresult. Podríamos hacer lo mismo para final_transcript iniciando el bucle for en 0. Sin embargo, debido a que el texto final nunca cambia, hicimos que el código aquí fuera un poco más eficiente. Para ello, hicimos que final_transcript sea 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 barra del micrófono y la animación del micrófono con el punto rojo parpadeante.
La imagen de barra del micrófono 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 la barra no es perceptible, pero la primera vez que se usa el reconocimiento de voz, Chrome debe solicitarle permiso al usuario para usar el micrófono. En ese caso, onstart solo se activa cuando el usuario otorga el permiso. Las páginas alojadas en HTTPS no necesitan pedir permiso repetidamente, mientras que las páginas alojadas en HTTP sí.
Así que permíteles escuchar a tus usuarios para darles vida a tus páginas web.
Nos encantaría recibir tus comentarios...
- Para comentarios sobre la especificación de la API de Web Speech de W3C: correo electrónico, archivo de correo, grupo de comunidad
- Para comentarios sobre la implementación de esta especificación por parte de Chrome: correo electrónico, 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.