A method of implementing speech search box with HTML5

Let's look at their different displays first.

Here's a screenshot of Firefox:

Here's a screenshot of the Chrome:

The guess is that the code written is definitely incompatible. But you'll find it really easy, even if you're a front-end beginner, you'll understand.

Copy Code

The code is as follows:

　　

The meaning of the parameters:

X-webkit-speech: is to let your input box on the right side of a small microphone, with voice function.

Lang: is the language type of the speech that is forced into the input box, for example, the lang= "ZH-CN" is written in Simplified Chinese.

X-webkit-grammar: Refers to the speech input syntax, the "Builtin:search" value makes the content of the speech input as close as possible to the search content, remove the extra characters.

Note: However, this hardware compatibility is still to be improved, because when you are mixed with voice in English, it is estimated that the situation is full.