How to realize Voice search by html5

Editor to share with you how to achieve voice search html5, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Google's website is up-to-date, and today they found a new way to play HTML5-voice search on their home page. Unfortunately, only browsers with webkit core can use it. The usage is very simple.

You only need to add the attribute x-webkit-speech to input, as shown in the following example:

The code is as follows:

In this way, there will be a "small microphone" in the right side of your input box, which will prompt you when you click.

At this time, it is OK to say it after identification. I tested it, and the recognition rate of Chinese and English is quite high.

Voice input other attributes:

Lang can force the language of the voice in the input box, such as

At present, the only known voice event is onwebkitspeechchange, which, as the name implies, is the event triggered when the voice changes, which can generally be used as a submission.

The code is as follows:

After saying this, I will search automatically.

X-webkit-grammar is not an attribute for voice search, but you can control the syntax of the input. For example, you can use it when doing a search box.

The code is as follows:

Make the voice input as close to the search content as possible, and remove redundant characters, such as "of"

This function is very interesting, practical is not flattering, mainly because the scope of application is too small, so I can only hope that HTML5 will be unified and applied as soon as possible.

The above is all the contents of the article "how to achieve Voice search in html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!