Learn to use Artyom.js and add voice commands to your webpage easily with javascript with a included videotutorial.

Did you ever in some phase of your life to give orders to a computer and expect an answer ? The way that Tony Stark talks to Jarvis is really fluid, pitifully what we can achieve with this article and this library is limited and you'll have to set it up almost all manually to give a fluid sensation while you talk to your computer thanks to Javascript and the webkitSpeechRecognition.

Now that you are a developer, the great day has become, create a website with voice commands that can be so flexible as you want. The HTML5 Speech Recognition API allows JavaScript to have access to a browser's audio stream and convert it to text. Thanks to Artyom.js a voice commands library handler this task will be a piece of cake.

Note : WebkitSpeechRecognition is only available in Google Chrome, hopefully, in the future this feature would be a standard for all browser, but for now we only can try artyom in this browser.

About the commands

Every command is a literal object with a couple of key-value relations which are :

indexes : All the available words that trigger this command
description : Add a little description to your command
action : A function that will be executed if a spoken word triggers this command

Step 1.

Add the library to your document in the head tag (you can get a copy of the library in the official repository in 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>

Step 2.

Add your commands. Is important to read the documentation and understand how works the commands here, artyom allows you to add smart and normal commands.

The normal command will be triggered when the user speaks and the recognized text matches with some of the indexes of the commands (contained in the array), for example :

// A normal command

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

The smart command allows to retrieve some spoken text of a command, useful to get the name of a variable action, for example :

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;
    }
  }
});

Step 3 (optional).

Verify if your command works using artyom.simulateInstruction, this function allows you to simulate a voice command and show how will work when the user talk, for example (using the previous commands) :

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

Step 4.

Start artyom, the initialize function will do the trick for you. You only have to set it up correctly and everything will work fine, the basic options that you need to give are:

lang : The code of the supporte artyom language (see list here)
continuous: Boolean, if you're using a https connection you can set to true, otherwise set always to false (as this will activate the 1 command mode)
listen:Boolean, if set to true, artyom will start listening, otherwise only the previous settings will be saved.
debug: Boolean, if set to true, all the recognized text and many information will be shown in the console

And it's really simple to use :

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 ;)

Step 5.

If you want to stop artyom, use the fatality function. The instance of artyom will be stopped instantly.

artyom.fatality();

Important notes

Artyom is a robust wrapper of the speechRecognition and speechSynthesis api of google chrome, that means artyom have many awesome features that could be useful to personal voice command projects.

Read the official documentation of Artyom.js
Artyom.js can make your browser talk with artyom.say instruction easily
Artyom needs to be used in a local or remote server (http or https), otherwise for security reason you can't use webkitSpeechRecognition API
Artyom needs https protocol to work in continuous mode (a permanent voice assistant)