Aprende a usar Artyom.js y agregue comandos de voz a tu página web fácilmente con javascript con un videotutorial incluido.


¿Alguna vez en alguna etapa de su vida le dio órdenes a una computadora y esperaba una respuesta? La forma en que Tony Stark habla con Jarvis es realmente fluida, lamentablemente lo que podemos lograr con este artículo y esta biblioteca es limitada y tendrás que configurarlo casi todo de forma manual para dar una sensación fluida mientras hablas con tu computadora gracias a Javascript y webkitSpeechRecognition.

Jarvis, make me a sandwich

Ahora que eres desarrollador, el gran día se ha convertido, crea un sitio web con comandos de voz que pueda ser tan flexible como quieras. La API de reconocimiento de voz HTML5 permite que JavaScript tenga acceso a la transmisión de audio de un navegador y la convierta en texto. Gracias a  Artyom.js, un controlador de la biblioteca de comandos de voz,  esta tarea será pan comido.

Nota: WebkitSpeechRecognition solo está disponible en Google Chrome, con suerte, en el futuro esta función sería un estándar para todos los navegadores, pero por ahora solo podemos probar artyom en este navegador.

Sobre los comandos

Cada comando es un objeto literal con un par de relaciones clave-valor que son:

  • índices: todas las palabras disponibles que activan este comando
  • descripción: agregue una pequeña descripción a su comando
  • acción: una función que se ejecutará si una palabra hablada activa este comando

Lea más sobre los comandos aquí .

Paso 1.

Agregue la biblioteca a su documento en la etiqueta principal ( puede obtener una copia de la biblioteca en el repositorio oficial en github ):

<!DOCTYPE>
<html>
  <head>
    <title>Cooking with artyom.js</title>
    <!-- Important to load artyom in the head tag, this give time to load all the voices in the browser -->
    <script type="text/javascript" src="path/to/artyom.min.js"></script>
    <script>
         // Create a global accesible instance of artyom
         window.artyom = new Artyom();
    </script>
  </head>
  <body>

    <script>
      // Artyom is available!
    </script>
  </body>
</html>

Paso 2.

Agregue sus comandos. Es importante leer la documentación y comprender cómo funcionan los comandos aquí , artyom le permite agregar comandos inteligentes y normales.

El comando normal se activará cuando el usuario hable y el texto reconocido coincida con algunos de los índices de los comandos (contenidos en la matriz), por ejemplo:

// A normal command

artyom.addCommands({
  indexes:["Hello","Hey","Hurra"],
  action: function(i){
    // i = index of the recognized option
    console.log("Something matches");
  }
});

El comando inteligente permite recuperar parte del texto hablado de un comando, útil para obtener el nombre de una acción variable, por ejemplo:

artyom.addCommands({
  smart:true,// We need to say that this command is smart !
  indexes:["How many people live in *"], // * = the spoken text after How many people live in is recognized
  action:function(i,wildcard){
    switch(wildcard){
      case "berlin":
        alert("Why should i know something like this ?");
      break;
      case "paris":
        alert("I don't know");
      break;
      default:
        alert("I don't know what city is " + * + ". try to increase the switch cases !");
      break;
    }
  }
});

Paso 3 (opcional).

Verifique si su comando funciona usando  artyom.simulateInstruction, esta función le permite simular un comando de voz y mostrar cómo funcionará cuando el usuario hable, por ejemplo (usando los comandos anteriores):

artyom.simulateInstruction("How many people live in Paris");
// alert("I don't know ._.");

Paso 4.

Inicie artyom, la función de inicialización hará el truco por usted. Solo tienes que configurarlo correctamente y todo funcionará bien, las opciones básicas que debes dar son: 

  • lang: el código del idioma artyom admitido ( ver lista aquí )
  • continuo: booleano, si está utilizando una conexión https , puede establecerlo en verdadero; de lo contrario, establezca siempre en falso (ya que esto activará el modo de comando 1)
  • listen: booleano, si se establece en verdadero, artyom comenzará a escuchar; de lo contrario, solo se guardarán las configuraciones anteriores.
  • debug: booleano, si se establece en verdadero, todo el texto reconocido y mucha información se mostrará en la consola

Y es realmente simple de usar:

artyom.initialize({
   lang:"en-GB",// More languages are documented in the library
   continuous:false,//if you have https connection, you can activate continuous mode
   debug:true,//Show everything in the console
   listen:true // Start listening when this function is triggered
});

// Artyom has been started ;)

Paso 5.

Si desea detener artyom, use la función de fatalidad. La instancia de artyom se detendrá instantáneamente.

artyom.fatality();

Notas importantes

Artyom es un envoltorio robusto de la API de reconocimiento de voz y síntesis de voz de Google Chrome, lo que significa que artyom tiene muchas características increíbles que podrían ser útiles para proyectos de comandos de voz personales.

  • Lea la documentación oficial de Artyom.js
  • Artyom.js puede hacer que su navegador hable fácilmente con las instrucciones de artyom.say
  • Artyom debe usarse en un servidor local o remoto (http o https); de lo contrario, por razones de seguridad, no puede usar la API webkitSpeechRecognition
  • Artyom necesita el protocolo https para funcionar en modo continuo (un asistente de voz permanente)

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