HTML5 voice search (Taobao store voice search)_html5 tutorial skills

Html5 supports voice search. Unfortunately, it can only be used by browsers with webkit core. The usage is very simple. You only need to add the attribute x-webkit-speech to the input. The example is as follows:

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

At this time, just say it and recognize it, such as voice search in Taobao store:

Other attributes of voice input: lang is the language type

You can control the language type of the speech in the input box, for example

Currently known is only onwebkitspeechchange. As the name suggests, it is an event triggered when the voice changes. Generally, it can be submitted as After saying this, it will automatically search.

x-webkit-grammar: This is not an attribute for voice search, but it can control the input grammar. For example, when making a search box, you can use x-webkit-grammar：

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

Let’s do a small example to test it:

Copy the code

The code is as follows:

Search
< /body>

效果如下：

<img alt="" src="http://files.jb51.net/file_images/article/201301/2013010310294631.png">