Technology has evolved so far that we do not have to take the pain to type our queries in the search engine anymore. Yes, you guessed it right! It’s the voice search that is bound to make lives easier more than ever. It is simple and easy to use.
All you have to do is open Google’s website from your mobile or desktop, and you can find the little microphone icon rooted within the search box. Just click this icon, you can speak now and here, you will find the magic happening – your speech is transcribed into text.
The best part of this voice or speech recognition is that you do not have to wait for the browser to comprehend your words. This would be the best option for input via the keyboard for anyone who has no idea about touch typing. There is no doubt that the voice search is going to be one of the biggest SEO trends in 2019. Let us check what is voice search and how to add speech recognition to your website.
What is Voice Search
It can be defined as a search that is activated by a command in the form of voice. Isn’t that simple?
With voice search, you are increasing your website’s accessibility – and this could bring more potential prospects as we are opening our doors to inclusiveness – as this could be one of the best ways that differently abled people can also voice their requirements over the web.
As they might find it difficult to type on a keyboard, voice search would be a preferred medium of communication. Also since it is voice search, it reduces time and effort as it won’t take long as people do not need to search for the keys on their keyboard to type and put those into words.
Some of the examples for such assistants include Alexa from Amazon and Google assistant that is bound to make lives easier for people.
Now, you can think of introducing such an experience for your people on your website. It could be counted as one of the great user experiences that you can offer to your people over your site.
It won’t take too much, but a few lines of code to add voice search to your site. This will make it easier for users to fill forms or search your website with their voice. Browsers, such as Google Chrome and even Firefox support voice search.
Guide to Add Voice Search to Your Website
Voice search is now widely used after smartphones became a trendsetter. We will help you with a step-by-step guide on how to add speech recognition to your website.
You might be already well familiar with the HTML5 speech recognition API, which can be made purposeful with our search recognition.
In that, you could add the attribute ‘x-WebKit speech’ to any form fields to ensure that voice recognition works with it. But these days, it is avoided due to reasons are best known to its users. But it can be made useful by adding the Javascript API, which will drive any fields on your form on to the path of voice recognition.
By implementing a simple CSS, Javascript and input buttons that are the essential ingredients of form code (voice recognition begins here), you can have the image of a microphone placed within the box.
The microphone image can be placed inside the box using a simple CSS, a JavaScript and input buttons that make a form code, the real soul behind voice recognition functionality working on any website.
Use the code given below:
<!– CSS Styles –>
<style>
.speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
.speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
.speech img {float: right; width: 40px }
</style>
<!– Search Form –>
<form id=”GeekerMagazine” method=”get” action=”https://www.google.com/search”>
<div class=”speech”>
<input type=”text” name=”q” id=”transcript” placeholder=”Speak” />
<img onclick=”startDictation()” src=”//i.imgur.com/cHidSVu.gif” />
</div>
</form>
<!– HTML5 Speech Recognition API –>
<script>
function startDictation() {
if (window.hasOwnProperty(‘webkitSpeechRecognition’)) {
var recognition = new webkitSpeechRecognition();
continuous = false;
interimResults = false;
lang = “en-US”;
start();
onresult = function(e) {
getElementById(‘transcript’).value
= e.results[0][0].transcript;
stop();
getElementById(‘GeekerMagazine’).submit();
};
onerror = function(e) {
stop();
}
}
}
</script>
The CSS is used to place the microphone image within the input box, along with the form code containing the input button and the JavaScript, which will take care of all the essential requirements.
How to Voice Search
So what happens when the user clicks on the mic image within the search box?
The process is very simple – here the JavaScript will check whether the user’s browser supports speech recognition. So if it does support, it will wait till the transcribed text will arrive from Google’s servers before submitting the form.
The dictation app has similar functionality as it also uses the speech recognition API, but it will write the transcribed text to the text area field rather than the input box.
So now, you know how to get voice search for your website. If you have other ideas, feel free to share with us in the comments box below.
Acodez is a web development company in India offering all kinds of web design and development services at affordable prices. We are also an SEO agency offering inbound marketing solutions at affordable prices. If you need any further information, please contact us today.
Looking for a good team
for your next project?
Contact us and we'll give you a preliminary free consultation
on the web & mobile strategy that'd suit your needs best.
