Home > Web Front-end > H5 Tutorial > body text

The new gameplay of html5 - voice search_html5 tutorial skills

WBOY
Release: 2016-05-16 15:50:45
Original
1920 people have browsed it

Google's website is always new, and today I discovered a new way to play HTML5 on their homepage - voice search. Unfortunately, it can only be used by webkit-based browsers. Usage is very simple
Just add the attribute x-webkit-speech to the input. The example is as follows:

Copy code
The code is as follows:



This way you will have an extra input box on the right "Small Microphone", when you click it, it will prompt

and then it will be recognized. I tested it and found that the recognition rate of Chinese and English is quite high.
Other attributes of voice input:
lang can force the language type of the voice in the input box, such as

Onwebkitspeechchange is currently the only known voice event. As the name suggests, it is an event triggered when the voice changes. Generally, it can be submitted as

Copy code
The code is as follows:



After saying this, it will automatically search
x-webkit-grammar is not an attribute for voice search, but it can control this input Syntax, for example, when making a search box, you can use

Copy the code
The code is as follows:



Make the voice input content as close as possible to the search content and remove redundancy characters, such as ""
This function is quite interesting, but I cannot praise its practicality. The main reason is that the scope of application is too small, so I can only hope that HTML5 will be unified and applied as soon as possible.
Related references:
HTML5 voice search (Taobao store voice search)
HTML5 voice search only requires one code
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template