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… 🙂