SAPUI5 – Voice Recognition

The more you work on any technology, the more the client gets comfortable and more complex and real life requirements come up. Same happened with us in our project. We have used SAPUI5 to the fullest and now, the client wanted a voice recognizing application. Technology is really for the lazy ones. Now folks do not want to type. They want to talk and complete the operations.

If you are a beginner, my articles might be a bouncer for you. Do not duck. Face it with grit. If you want to be a real SAPUI5 developer, accept these challenging requirements and learn.

Here we present a sample app to demonstrate the voice recognition. You can provide hands free operations. Example user can say “Save” instead of clicking a button and you can form save operation.

Step1:- Initialize and Settings for Indian English

Initialize the voice recognition variable and its settings to recognize in English India (You can set your preferences)

<code>if('webkitSpeechRecognition' in window){
            this.recognition = new webkitSpeechRecognition() ;
        }else{
            this.recognition = new SpeechRecognition();
        }
    this.recognition.continuous = true;
    this.recognition.interimResults = false;
    this.recognition.lang = 'en-IN';</code>

Step2:- Initialize Result Function

Initialize the result function which provides the user speech values

<code>this.recognition.onresult = function(event) {
            var vFinal = "";
            for (var i = event.resultIndex; i < event.results.length; ++i) {
                if (event.results[i].isFinal) {
                    vFinal = event.results[i][0].transcript;
                }
            }
            if (vFinal != "") {
                sap.m.MessageToast.show(vFinal);
            }
        };</code>

Step3:- Start the voice recognition

<code>this.recognition.start();</code>

And you are done. Simple right? Below is a sample application for your rescue. Copy and run it in your system.