Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > HTML5 voice search (Taobao store voice search)_html5 tutorial skills

HTML5 voice search (Taobao store voice search)_html5 tutorial skills

WBOY
Release： 2016-05-16 15:50:33
Original
2126 people have browsed it
Html5 supports voice search. Unfortunately, it can only be used by browsers with webkit core. The usage is very simple. You only need to add the attribute x-webkit-speech to the input. The example is as follows:

In this way, there will be a "small microphone" on the right side of your input box, which will prompt you when you click it

At this time, just say it and recognize it, such as voice search in Taobao store:


Other attributes of voice input: lang is the language type

You can control the language type of the speech in the input box, for example

Currently known is only onwebkitspeechchange. As the name suggests, it is an event triggered when the voice changes. Generally, it can be submitted as After saying this, it will automatically search.
x-webkit-grammar: This is not an attribute for voice search, but it can control the input grammar. For example, when making a search box, you can use x-webkit-grammar：

Make the voice input content as close as possible to the search content and remove redundant characters, such as "的".

Let’s do a small example to test it:

Copy the code
The code is as follows:





< /body>


效果如下：
<img alt="" src="http://files.jb51.net/file_images/article/201301/2013010310294631.png">
Related labels：
voice search
source：php.cn
Previous article：Introduction to the new array TypedArray introduced in HTML5_html5 tutorial skills Next article：Break through the limitations of canvas syntax and let it support chain syntax_html5 tutorial skills
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
Latest Articles by Author
Latest Issues
Regular expression filter for MERN stack search boxes and checkboxes I'm trying to understand how the MERN stack works together by learning by doing, and I'm f...
From 2024-04-06 14:53:12
0
1
425
Hide/show div on click and scroll I want to create a hidden search form that appears when we click on the search icon and hi...
From 2024-04-06 12:20:46
0
1
386
How to insert multiple rows in MySQL table and return new IDs? Normally I can insert a row in a MySQL table and get the last_insert_id. But now, I want t...
From 2024-04-06 10:03:44
0
2
294
There is an error with npx create-react-app command, how do I fix it? I've been trying to create a new React app using the 'npxcreate-react-app' command but it ...
From 2024-04-05 14:42:18
0
1
3511
React Router nested routing and use of search parameters When using search parameters in a nested React route, when I'm on /app, and after clicking...
From 2024-04-05 13:48:33
0
1
1475
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template