How to add Voice Recognition to your Website

Voice recognition is often thought of as a complicated, “high end” feature by many amateur programmers. And to be fair, it was. Developing your own machine learning model to recognize human voices is difficult, expensive, and time consuming, and could only really be done by the biggest tech companies.

Today, the situation has changed. The democratization of the internet and the immense plethora of available resources has allowed smaller players to jump into the voice recognition arena. Anyone, even individual programmers, can now add voice software to their code, using the integration from Alan AI.

Alan AI is a Silicon Valley company that offers a voice button that you can include in your websites or apps. The cloud app (alan.app) processes inputs and outputs based on the user’s custom scripts, and sends information to the local file. That information can then be used to elicit a response.

The Alan AI company logo.

As an intern for Alan AI over the summer, I put its voice capabilities to the test by incorporating it into a computerized Battleship game. I found a good version of online battleship on github, written in javascript, that I used as the base for my project (link: https://github.com/lluiscamino/battleship.js). The game was published under the MIT license, so I could freely modify it.

Once I had the game in my local system, I could begin adding to it. Here are the steps I took to improve the game:

1. I integrated the Alan AI button into the game. The code is very simple; I simply added the following block into the body of the html.

<div class="alan-btn">
        <script type="text/javascript"
        src="https://studio.alan.app/web/lib/alan_lib.min.js">   </script>
        <script>
          var alanBtnInstance = alanBtn({
            key: "...",
            onCommand: function (commandData) {
              if (commandData.command === "go:back") {
                
              }
              //code that will react to recieved command
        </script>

I also had to add code on the cloud side (alan.app) to correctly read and process user input. Since Battleship is a game where you fire at coordinate tiles from a1 to j10, I made the game focus specifically on the user saying letters from a to j and numbers from 1 to 10:

intent('$(H a|b|c|d|e|f|g|h|i|j) $(V 1|2|3|4|5|6|7|8|9|10)', p => {
    var num = p.V.value;
    var lett = p.H.value;
    p.play({"letter": lett, "num": num});
});

Later on, this code was edited to allow multiple locations to be “barraged” in one go, as well as to allow “airstrikes”.

2. I voiced the opponent’s moves. The Alan AI button, along with allowing the user to use voice commands, also allows the game to voice important things back to the user (the button gets turned into a speaker, sort of). When the user says a move, I made it such that the computer tells the user its own move (allowing the user to better keep track of the situation).

alanBtnInstance.playText(str);

3. I added sound effects for shooting water, hitting a ship, sinking a ship, calling in an airstrike, winning, and losing. All sounds were taken off freesound.org, a fantastic repository of sound effects.

Adding sounds in javascript is easy. First, bring the .wav or .mp3 sound files into the same folder as the index.html file, or a subfolder. Then, use the following code to adjust volume and play it:

var lose = new Audio('lose.wav');
lose.volume = 0.3;
lose.play();

4. I fixed the restart button. For some reason, it had been disabled in the original game.

5. I improved the game aesthetically by adding a military themed background. Here’s how it looks:

game with background

To modify the background, all you need to do is add this single line of code to the body style:

background-image: url("backgroundimg.png");

Overall, this blog is meant to give you a brief overview of what it takes to implement voice activation in a project. It’s an example of a project I made over summer, but it isn’t the final word regarding Alan AI. Voice activation can be used for not only games, but corporate apps and other software as well. It has limits, but is still a remarkably useful and open tool for programmers across the world.

My Battleship game is now published online. It can be played here: https://honorius.us/battleships/index.html