Aprende a utilizar la API webkitSpeechRecognition para convertir voz a texto

Acerca de la API webkitSpeechRecognition

La API Web Speech, introducida a finales de 2012, permite a los desarrolladores web proporcionar funciones de entrada de voz y salida de texto a voz en un navegador web. Por lo general, estas funciones no están disponibles cuando se usa un software estándar de reconocimiento de voz o lector de pantalla. Esta API se ocupa de la privacidad de los usuarios. Antes de permitir que el sitio web acceda a la voz a través del micrófono, el usuario debe otorgar permiso explícitamente.

Algunos puntos importantes que debes conocer:

  • Solo está disponible hasta la fecha (23.02.2016) solo en Google Chrome.
  • Los archivos locales (archivo: // protocolo) no están permitidos, el archivo debe ser hospedado de alguna manera en un servidor (o localhost).

Ejemplo básico

El siguiente código hará el soporte más básico para recuperar lo que dice el usuario, puede usar interim_transcript y final_transcript para mostrarle al usuario el texto reconocido.

var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = "en-GB";

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;
      }
    }
    
    console.log(interim_transcript,final_transcript);
  };
}

El repositorio en github de google tiene un ejemplo muy completo (con muchos códigos de idioma, evitar errores, etc.)  puedes descargar la demo desde el repositorio aquí .

Usando una biblioteca

Artyom.js es una sólida biblioteca contenedora para la API webkitSpeechRecognition, que le permite realizar trucos increíbles como comandos de voz, indicaciones de voz, síntesis de voz y muchas más funciones. En este caso nos interesará la  función artyom.newDictation . Esta función envolverá todo el código anterior en algo más simple, primero debe incluir la biblioteca en su proyecto, su archivo html debería verse así:

<!DOCTYPE>
<html>
  <head>
    <title>Dictation example </title>

    <script type="text/javascript" src="path/to/artyom.min.js"></script>
  </head>
  <body>
   <input type="button" onclick="startRecognition();" value="Recognize text" />
   <input type="button" onclick="stopRecognition();" value="stop recognition" />
   <script>
      // we will write the javascript here
   </script>
</body>
</html>

Si ya vinculó la biblioteca artyom en su documento, entonces su javascript se verá así:

var settings = {
    continuous:true, // No pares nunca porque tengo conexión https
    onResult:function(text){
        // text = the recognized text
        console.log(text);
    },
    onStart:function(){
        console.log("Dictation started by the user");
    },
    onEnd:function(){
        alert("Dictation stopped by the user");
    }
};

var UserDictation = artyom.newDictation(settings);

function startRecognition(){
  UserDictation.start();
}

function stopRecognition(){
  UserDictation.stop();
}

Solo tendrá que manejar la inicialización y luego, la magia ocurrirá en la propiedad onResult del objeto de configuración. Aunque artyom hace las cosas mucho más fáciles, tendrás que pensar si realmente necesitas usarlo, si estás comenzando con este tema, es recomendable usar el código simple, así entenderás cómo funciona esta api y si todavía estás interesado, puedes usar artyom más tarde.

El potencial de esta API es realmente increíble, sin embargo, es una pena que solo Google Chrome lo admita. Puedes mejorar todo el código anterior, por ejemplo detectar en qué navegador puedes inicializar webkitSpeechRecogniton.


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores