Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of HTML5 voice search for you. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

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 copy code is as follows:

Just put it in the text input box. Don't do anything else. Look.

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

The copy 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 copy 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.

This is the end of the article on "sample Analysis of HTML5 Voice search". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.