Home > Blog > Voice Recognition on input text box in Salesforce

Voice Recognition on input text box in Salesforce

Hi All, Today we will discuss how to implement Voice Recognition on input text box. So I am writing this post to implement this feature on visualforce pages to get it better. So to understand this you need to have a knowledge on Javascript and Apex VF pages. Below is the code to implement this feature on VF page .

Click inside box to speak…


    (function() {
        'use strict';
        if (! ('webkitSpeechRecognition' in window) ) 
            return;
        var talkMsg = 'Speak now';
        var patience = 6; // Time in seconds
        function capitalize(str) {
            return str.length ? str[0].toUpperCase() + str.slice(1) : str;
        }
        var speechInputWrappers = document.getElementsByClassName('ContainerID');
        //It works for only text box which is located in 'ContainerID'
        [].forEach.call(speechInputWrappers, function(speechInputWrapper) {
            //Getting text from InputTextbox
            var inputEl = document.getElementById('InputTextboxID');
            //Handle click event on inputBox
            var micBtn = document.getElementById('InputTextboxID');
            var inputHeight = inputEl.offsetHeight;
            var inputRightBorder = parseInt(getComputedStyle(inputEl).borderRightWidth, 10);
            var buttonSize = 0.8 * inputHeight;
            var finalTranscript = '';
            var recognizing = false;
            var timeout;
            var oldPlaceholder = null;
            var recognition = new webkitSpeechRecognition();
            recognition.continuous = true;
            function restartTimer() {
                timeout = setTimeout(function() {
                    recognition.stop();
                }, patience * 500);
            }
            //Changing the placeholder text inside textbox
            recognition.onstart = function() {
                oldPlaceholder = inputEl.placeholder;
                inputEl.placeholder = talkMsg;
                recognizing = true;
                micBtn.classList.add('listening');
                restartTimer();
            };
            //When someone stop to speaking, it will run
            recognition.onend = function() {
                //Checking for is textbox contains ant string or not
                if( document.getElementById('InputTextboxID').value != '' ){
                    //It click the default button to enter or Search
                    document.getElementById('buttonID').click();
                }
                recognizing = false;
                clearTimeout(timeout);
                micBtn.classList.remove('listening'); // Place holder when you speak
                if (oldPlaceholder !== null) inputEl.placeholder = oldPlaceholder;
            };
            recognition.onresult = function(event) {
                clearTimeout(timeout);
                for (var i = event.resultIndex; i < event.results.length; ++i) {
                    if (event.results[i].isFinal) {
                        finalTranscript += event.results[i][0].transcript;
                    }
                }
                finalTranscript = capitalize(finalTranscript);
                inputEl.value = finalTranscript;
                restartTimer();
            };
            //Handling click event on Textbox -  we can make it for button as well but right now we have no mic button as google have so i am giving this event on textbox
            micBtn.addEventListener('click', function(event) {
                event.preventDefault();
                if (recognizing) {
                    recognition.stop();
                    return;
                }
                inputEl.value = finalTranscript = '';
                recognition.start();
            }, false);
        });
    })();

Here we have made a strict use of ‘webkitSpeechRecognition’, means you need to enable microphone of your laptop. Without enabling, this feature will not going to work. You need to put this inside a container and give that container an ID. Then give your textbox a ID and write javascript Voice recognition functionality. It will change the text when person starts speaking and person stops speaking. Next we need to handle click event on that box and We are good to go. For any further queries please query in the comments.

Enquire Now
X

lets get over a cup of coffee and discuss!