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

by Posted on

As you have seen mic icon on google search box on desktop, browser, and mobile and when ever you click this icon and speech your query it’s quickly transcribed into words and search your query on google. Now a days so many apps using this feature which help user to don’t write your query manually just speech and app will automatically convert your voice into plain text and search given query in system.
voice2text
You can easily embed same feature into your website by using HTML5 Speech Recognition API. The HTML5 Speech Recognition API allows JavaScript to have access to a browser’s audio stream and convert it to text.


Integration Of Speech Recognition Search Box On Your Website

First I have included bootstrap library on page so that i can easily create google like search box.

<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 with mic icon and when ever click the the mic icon browser will ask the permission to access your microphone, click on yes and start speaking and you’ll see what ever you’ll speak it’ll quickly convert your voice into words and i have automated send query to google search. You can replace search url with your website search url.

<form id="iamrohit" 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 on mic click to first check whether your browser support ” HTML5 Speech Recognition” or not if you browser support speech Recognition then continue to use webkitSpeechRecognition() function to convert voice to text and you can also pass more option in webkitSpeechRecognition() function to control dictation like 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>

See live demo and download source code.

DEMO | DOWNLOAD



Published by admin