Adding voice recognition to your search box

Now a days, the world is moving towards or utilizing the modern edge features in their day to day activities. So giving our end customers a feature of voice recognition on the Search box of our website might draw us some more traffic and leads.

Now the logic, we need here is to hear the search term or phrase from the end customer and send it to our Search Controller. Also if there is multilingual then we should make sure we set the recognition language before we hear from the end customer.

In this example, we will see the implementation for English and French.

<!-- HTML5 Speech Recognition API -->
<script>
function startDictation() {​​​
         if (window.hasOwnProperty('webkitSpeechRecognition')) {​​​
         var recognition = new webkitSpeechRecognition();
         recognition.continuous = false;
         recognition.interimResults = false;
         recognition.lang = "en-US";

         if (window.location.href.includes("/fr")) {​​​
              recognition.lang = "fr-FR";
         }​​​

         recognition.start();
         recognition.onresult = function (e) {​​​

         document.getElementsByClassName('txtSiteSearch').value
 = e.results[0][0].transcript;
         recognition.stop();
 
         document.getElementsByClassName('txtSiteSearch').value =  document.getElementsByClassName('txtSiteSearch').value;

         if (window.location.href.includes("/fr")) {​​​
             window.location.href = "/fr/Search-Results?search=" + document.getElementsByClassName('txtSiteSearch').value;
         }​​​
         else {​​​
             window.location.href = "/en/Search-Results?search=" + document.getElementsByClassName('txtSiteSearch').value;
         }​​​}​​​;
 
         recognition.onerror = function (e) {​​​
                recognition.stop();
         }​​​
      }​​​
}​​​
</script>

Add the above script tag on the main layout or add the function to the main JS file.

Add the mic icon to your search box.

<input class="txtSiteSearch" type="text" placeholder="Search here...">
        <button class="btnSiteSearch">
            <img alt="Voice Icon" class="siteSearchVoiceIcon" src="//i.imgur.com/cHidSVu.gif" />
            <img alt="Search Icon" class="siteSearchIcon" src="/Resources/images/svg/search-icon.svg" />
        </button>

Add a JavaScript code to call StartDictation() function on click of ( siteSearchVoiceIcon) class and we are done. The browser will prompt you for permission to access the microphone and you can command it accordingly.

Reference blog: https://www.labnol.org/software/add-speech-recognition-to-website/19989/

Thank you…. Keep Learning… Keep Sitecoring… 🙂

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s