Add Speech Recognition Search Box On Your Website Using HTML5 Speech Recognition API

Speech Recognition

As you have seen mic icon around google Add Speech Recognition search crate following reference to desktop, browser, and mobile and subsequent to ever you click this icon and speech your query its speedily transcribed into words and search your query concerning google. Now a days consequently many apps using this feature which support enthusiast to don’t write your query manually just speech and app will automatically convert your voice into plain text and search firm query in system.

You can easily embed same feature into your website by using HTML5 Speech Recognition API. The HTML5 Speech Recognition API allows JavaScript to have entry to a browsers audio stream and convert it to text.

Integration Of Speech Recognition Search Box On Your Website

First I have included bootstrap library in story to page thus that i can easily make google gone search crate.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" > 
 
 
<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

After that create sample search box subsequent to than mic icon and bearing in mind ever click the the mic icon browser will ask the entrance to admission your microphone, click upon yes and begin speaking and youll see what ever youll talk itll speedily convert your voice into words and i have automated send query to google search. You can replace search url considering your website search url.

<form id="Findyoursolution.in" method="get" action="https://www.google.com/search">
<div class="form-group">
    <div class="input-group">
        <input type="text" class="form-control" id="search" name="q">
        <span class="input-group-addon" id="mic" style="cursor:pointer"><i class="fa fa-microphone" aria-hidden="true"></i></span>
    </div>
</div>
</form>

Now finally write program in javascript upon mic click to first check whether your browser preserve HTML5 Speech Recognition or not if you browser maintain speech Recognition subsequently continue to use webkitSpeechRecognition() exploit to convert voice to text and you can as well as appendix more substitute in webkitSpeechRecognition() motion to rule dictation once set your native language many more.

<script>
$(function(){  
 $("#mic").click(function() {  
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
      var recognition = new webkitSpeechRecognition();
      recognition.continuous = false;
      recognition.interimResults = false;
      recognition.lang = "en-US";
      recognition.start();
      recognition.onresult = function(e) {
        $("#search").val(e.results[0][0].transcript);
        recognition.stop();
        $('#iamrohit').submit();
      };
      recognition.onerror = function(e) {
        recognition.stop();
      }
    }
 });
});
</script>

Leave a Reply