How to realize Voice search by HTML5

This article mainly introduces HTML5 how to achieve voice search, the article is very detailed, has a certain reference value, interested friends must read it!

The voice search on Taobao has been going on for a while, but it seems that none of the relevant blogs or posts are talking about how to achieve this. I checked some materials today and found that the implementation was so simple, probably because it was too simple, so no one discussed it.

In fact, all it takes is a single line of code:

X-webkit-speech

What do you think of when you see this code? Yes, this means that voice search only supports webkit kernel browsers, so where exactly should this code be placed?

The code is as follows:

Just put it in the text input box. You don't have to do anything else.

Of course, there are some other parameters, such as setting voice restrictions on language types.

The code is as follows:

There are also parameters for setting voice input syntax, which is more likely to be used in the search box. After adding this parameter, the system will automatically remove meaningless words such as "de" and "la".

The code is as follows:

Of course, a small problem was found during the test, that is, when the page with voice search is an iframe page, after clicking on the microphone, the floating layer of "Please start talking" will not follow the input input box.

The above is all the contents of the article "how to achieve Voice search in HTML5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!