Tutorial

In this example, we add quickly voice functionality to an application in french and english.

1) Setting up

var speechYL = new SpeechYL();
var lang = "en-EN";
speechYL.setLang(lang);

//Choose a voice for synthesis

var voiceFemaleEnglish = speechYL.getVoiceByName("Google UK English Female");

//Set voice

speechYL.voice = voiceFemaleEnglish;

2) Write a json file with our commands

When we write the json file, we can specified multiple langages. SpeechYL will take in consideration the langage set with the methods setLang The punctuation is not recognize by the SpeechRecogniton API, so do not put punctuations in the recognition object, it could not be recognize.

File: commands.json

[
    {
        "recognition": {
            "en-EN": "log me out",
            "fr-FR": "deconnecte moi"
        },
        "func": "logOut"
    },
    {
        "recognition": {
            "en-EN": "go to the previous page",
            "fr-FR": "va a la page precedente"
        },
        "func": "goPreviousPage"
    },
    {
        "recognition": {
            "en-EN": "go to the next page",
            "fr-FR": "va a la page suivante"
        },
        "func": "goNextPage"
    },

]

You can also add commands programmaticaly.

3) Write the functions associated with the commands

ES6 (ES2015)

One of the way to add the functions associated with the commands is in a class.

class SpeechYLFunc{

    logOut() {
        //code
    }

    goPreviousPage() {
        //code
    }

    goNextPage() {
        //code
    }

}

ES5

var func = {

logOut: function () {},
goPreviousPage: function () {},
goNextPage: function () {}

}

4) Add the commands and functions to speechYL

speechYL.loadJsonCommands("commands.json"):

// ES6 (ES2015)
speechYL.commandsFunc = new SpeechYLFunc();

// ES5

speechYL.commandsFunc = func;

5) Start the recognition

You can start the recognition with the methods recogStart.

Click on a button

document.getElementById("button").addEventListener("click", function() {
    speechYL.recogStart();
}, false);

Keyboard shortcut

document.getElementById("button").addEventListener("click", function() {
    speechYL.recogStart();
}, false);