Shulou(Shulou.com)06/03 Report--

This article mainly shows you "HTML5 how to achieve voice search", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve voice search in HTML5" this article.

Html5 supports voice search, but unfortunately only webkit core browsers can use it. The usage is simple. You only need to add the attribute x-webkit-speech to input, as shown in the following example:

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, you can just say it and identify it, such as Taobao store Voice search:

Other attributes of voice input: lang is the language type

You can control the language of the speech in the input box, such as

At present, only onwebkitspeechchange is known, which, as the name implies, is the event triggered when the voice changes, which can be used as a submission and searched automatically after that.

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

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

Let's test it with a small example:

The code is as follows:

Search for

The effect is as follows:

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.