Voice Recognition Search in Salesforce (VF-Page)

icon128

Hi All,

Recently i have posted “Create Chrome Extension for Voice Recognition Search in Salesforce“. Some devs are little confused about how is it working. So i am writing this post for implement this feature on visualforce pages to get it better.

How is it working on salesforce standard search bar ?
First of all we need to right click on search bar and then select “Inspect Element”. After that we need to understand id and classes for this box.

Capture

In this javascript we will use searchBoxClearContainer,phSearchInput,phSearchInput and phSearchButton.

<apex:page>
<h1>Click on search bar...</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
(function() {
    'use strict';
    if (! ('webkitSpeechRecognition' in window) ) return;
    var talkMsg = 'Speak now';
    var patience = 6;
    function capitalize(str) {
        return str.length ? str[0].toUpperCase() + str.slice(1) : str;
    }
    var speechInputWrappers = document.getElementsByClassName('searchBoxClearContainer');
    //It works for only text box which is located in 'searchBoxClearContainer'
    [].forEach.call(speechInputWrappers, function(speechInputWrapper) { 

        //Getting text from phSearchInput textbox
        var inputEl = document.getElementById('phSearchInput');

        //Handle click event on inputBox
        var micBtn = document.getElementById('phSearchInput');

        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('phSearchInput').value != '' ){
                //It click the default search button
                document.getElementById('phSearchButton').click();
            }
            recognizing = false;
            clearTimeout(timeout);
            micBtn.classList.remove('listening');
            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);
    });
})();
</script>
</apex:page>
Advertisements

6 thoughts on “Voice Recognition Search in Salesforce (VF-Page)

  1. Pingback: Create Chrome Extension for Voice Recognition Search in Salesforce | Vishnu Vaishnav

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s