How to implement voice search box with html5_html5 tutorial skills

Let’s take a look at their different displays first.
The following is a screenshot under Firefox:

The following is a screenshot in chrome:

What you can guess is that the code written is definitely incompatible. But you will find that it is relatively simple. Even if you are a front-end beginner, you will understand

Copy the code

The code is as follows :

The meaning of the parameters:
x-webkit-speech: It makes a small microphone appear on the right side of your input box, with a voice function.
lang: It is the language type of the voice in the mandatory input box. For example, the lang="zh-CN" written above refers to Simplified Chinese.
x-webkit-grammar: refers to the voice input grammar. The "builtin:search" value makes the voice input content as close as possible to the search content and removes redundant characters.

Note: However, the compatibility of this hardware still needs to be improved, because when you mix Chinese and English voices, there will probably be a lot of problems.