Skip to main content

How to add voice commands to your webpage with javascript

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.

Jarvis, make me a sandwich

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

Read more about the commands here.

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>
 COPY SNIPPET

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");
  }
});
 COPY SNIPPET

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

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 ._.");
 COPY SNIPPET

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 httpsconnection 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 ;)
 COPY SNIPPET

Step 5.

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

artyom.fatality();
 COPY SNIPPET

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)

Comments

Post a Comment

Popular posts from this blog

How to use Ngx-Charts in Angular ?

Charts helps us to visualize large amount of data in an easy to understand and interactive way. This helps businesses to grow more by taking important decisions from the data. For example, e-commerce can have charts or reports for product sales, with various categories like product type, year, etc. In angular, we have various charting libraries to create charts.  Ngx-charts  is one of them. Check out the list of  best angular chart libraries .  In this article, we will see data visualization with ngx-charts and how to use ngx-charts in angular application ? We will see, How to install ngx-charts in angular ? Create a vertical bar chart Create a pie chart, advanced pie chart and pie chart grid Introduction ngx-charts  is an open-source and declarative charting framework for angular2+. It is maintained by  Swimlane . It is using Angular to render and animate the SVG elements with all of its binding and speed goodness and uses d3 for the excellent math functio...
Post a Comment
Read more

Understand Angular’s forRoot and forChild

  forRoot   /   forChild   is a pattern for singleton services that most of us know from routing. Routing is actually the main use case for it and as it is not commonly used outside of it, I wouldn’t be surprised if most Angular developers haven’t given it a second thought. However, as the official Angular documentation puts it: “Understanding how  forRoot()  works to make sure a service is a singleton will inform your development at a deeper level.” So let’s go. Providers & Injectors Angular comes with a dependency injection (DI) mechanism. When a component depends on a service, you don’t manually create an instance of the service. You  inject  the service and the dependency injection system takes care of providing an instance. import { Component, OnInit } from '@angular/core'; import { TestService } from 'src/app/services/test.service'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.compon...
Post a Comment
Read more

How to solve Puppeteer TimeoutError: Navigation timeout of 30000 ms exceeded

During the automation of multiple tasks on my job and personal projects, i decided to move on  Puppeteer  instead of the old school PhantomJS. One of the most usual problems with pages that contain a lot of content, because of the ads, images etc. is the load time, an exception is thrown (specifically the TimeoutError) after a page takes more than 30000ms (30 seconds) to load totally. To solve this problem, you will have 2 options, either to increase this timeout in the configuration or remove it at all. Personally, i prefer to remove the limit as i know that the pages that i work with will end up loading someday. In this article, i'll explain you briefly 2 ways to bypass this limitation. A. Globally on the tab The option that i prefer, as i browse multiple pages in the same tab, is to remove the timeout limit on the tab that i use to browse. For example, to remove the limit you should add: await page . setDefaultNavigationTimeout ( 0 ) ;  COPY SNIPPET The setDefaultNav...
Post a Comment
Read more