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.
Start with HTML code.
- Second, add a microphone icon to activate Speech Recognition.
- Add some style in your form through CSS.
- 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.