New way to play html5 - voice search

Comment: Google's website is Shibian Shixin. Today, I discovered a new way to play HTML5 - voice search on their homepage. Unfortunately, only webkit core browsers can use it. The usage is very simple, just add the attribute x-webkit-speech to input

Just add the attribute x-webkit-speech to input, the example is as follows:

<input type="text" x-webkit-speech />

In this way, there will be an "small microphone" on the right side of your input box, and it will be prompted when clicked

Then I can tell you and recognize it. After testing, I found that the recognition rate of Chinese and English is quite high.

Other attributes for voice input:

This thing lang can force the type of pronunciation in the box, for example

<input type=text x-webkit-speech lang=zh-CN/>

Currently, the only known voice events are onwebkitspeechchange. As the name suggests, it is an event triggered when the voice changes. It can generally be submitted.

<input type="text" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/>

After that, it will be automatically searched

x-webkit-grammar is not a property used for voice search, but it can control the syntax of this input. For example, if you are doing a search box, you can use it

<input type="text" x-webkit-speech x-webkit-grammar="bUIltin:search" />

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

This function is quite interesting, and it is not a good idea to be practical. It is mainly because the scope of application is too small, so I can only hope that HTML5 will be applied uniformly as soon as possible.

Related reference:

HTML5 voice search (Taobao store voice search)

HTML5 Voice search requires only one sentence of code