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!