Voice search is more and more popular nowadays. You can see all the big giants like Google, Amazon, Apple, and Microsoft use their own Speech Recognition technology to add voice search. Like Microsoft use Crotona, Apple uses Siri, and amazon alexa. You can use their Speech Recognition technology to search the web, purchase goods and do lots of things.
You can also add Speech Recognition technology (Voice search) on your website. It’s like magic, yaa? But you can also add a voice search on your website through Web Speech API with a few lines of code. All the viewers or subscribers search on your website through voice search and it increases your visitor all over performance. Web Speech API supports only the chrome and Firefox browser.
In your website, voice search works like or similar to google voice search. All the visitors find a Search box with a little microphone icon. When a visitor clicks on the microphone icon voice search or Speech Recognition API activated and perform a search on your website automatically. Your visitor performs a search through Speech API or typing it supports both.
Before we start let’s play the demo.
You can also make your own voice note app through this Web Speech API. It will convert your voice into text in real-time like the voicetotext.org web app. Read this article to make your own voice to text app.
Add Voice Recognition to your Website
Voice Search uses Web Speech API technology, through API we add voice search. So just copy the given code into your website and save the file. When you open a web page in browser you can see the input box with a mic icon. When clicking on the icon, voice search starts to perform a search on your website and given the result.
<style>
.speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
.speech input {border: 0; width: 240px; display: inline-block; height: 35px;}
.speech img {float: right; width: 40px }
</style>
<script type="text/javascript">
function startSearch() {
if (window.hasOwnProperty('webkitSpeechRecognition')) {
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.lang = "en-US";
recognition.start();
recognition.onresult = function(e) {
document.getElementById('transcript').value
= e.results[0][0].transcript;
recognition.stop();
document.getElementById('q').submit();
};
recognition.onerror = function(e) {
recognition.stop();
}
}
}
</script>
<!-----HTML------>
<form id="q" method="get" action="http://technobush.com/?s">
<div class="speech">
<input type="text" name="s" id="transcript" placeholder="Speak" />
<img onclick="startSearch()" src="//i.imgur.com/cHidSVu.gif" />
</div>
</form>Code Explanation
Start with HTML code.
- First, add an input box to add text with your website search page URL with id “transcript” this id used in javascript.
- Second, add a microphone icon to activate Speech Recognition.
- Add some style in your form through CSS.
Now add the heavy task to add javascript to perform speech API.
- To activate speech API add var recognition = new webkitSpeechRecognition();
- Add language we use English United States “en-US” you can change with your language. After that recognition start method.
- When speech API activated recognition.onresult add text in input box with id “transcript” this id use in HTML code.
- After that stop recognition and submit the query.
Some points to remember.
- You can change your language in lang method. For example, add Japanese “ja-jp” or Hindi “hi-IN”.
- In the HTTPS website browser ask permission only one time but in the HTTP website browser ask permission every time when you click on the mic icon.
Sounds like a great addition and obviously a necessity to have on all websites in the near future but, for us who are not developers/programmers, you really didn’t give a good description of how we add it to our scripts.
Also, I’m not really sure if this would work on E-Commerce platforms such as;
https://bidmart.ca
I’d really like to hear more about this and have a better description of how to install the script.
This script develop to run on any WordPress website. You can easily embed this code in your website. First login into your WordPress dashboard and navigate to appearance add custom HTML widget and paste all code which you can copy in our website and last save the widget.
Hi i tried to install voice search with the html widget. i did copy and paste, but i didn’t see the display in my site. i tried 2 times with footer and secondary widget.this code got error reply in img , (you need to add alt text) and delete border in css ( it will be too big). can you send more details
I tried this script one more time and this script work perfectly, if you got error in your HTML editor like alt text (you need to add alt text) and CSS border ( it will be too big) just ignore that. It doesn’t effect the code. If you can’t see anything in your site after embed the code may be due to catch plugin. Please purge all catch in your website and see that it work or not.
hey.. it is giving me the exact same interface as yours but is not taking the voice as input. When i click on the microphone, basically nothing happens. I tried on your site it works perfectly there. pls tell me what to do its really urgent for my FYP 🙁
Give me the link where you embed the code, we dig out and find the error