谷歌的网站以及淘宝网搜索框加了语音搜索功能。虽然目前只有webkit内核浏览器支持，如Chrome 11+浏览器，但是相信随着html的普及，绝大多数浏览器会支持此功能。
先上图：
普通文本框代码：
<input />
支持HTML5语音API的语音识别文本框
<input x-webkit-speech />
看到没，文本框后面有个麦克风模样的东西
此时，对着音频输入设备（如耳麦）发出你那或妖娆，或醇厚，或磁性的嗓音，啊~~
当然还有一些其他的参数，比如设置语音限制语言种类
<input x-webkit-speech lang=”zh-CN” />
还有设置语音输入语法的参数，这个就比较试用于搜索框。加上这参数后，系统就会自动去掉“的”、“啦”这类无意义的字
<input x-webkit-speech x-webkit-grammar=”bUIltin:search” />
还有一个onwebkitspeechchange的方法，发生在语言识别成功，且文字输入到文本框后触发。
<input x-webkit-speech x-webkit-grammar=”bUIltin:search” />
我觉得所有网站所有的类似搜索的输入框都让他支持HTML5语言识别!
HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>请使用支持HTML5的chrome浏览器体验语音搜索效果。|www.125jz.com</title>
<style type="text/css">
.search_form {
position: relative;
height: 31px;
margin: 60px;
display: inline-block;
}
.search_form:hover {
-webkit-box-shadow: 0 0 3px #999;
-moz-box-shadow: 0 0 3px #999
}
.sinput {
float: left;
width: 200px;
height: 21px;
line-height: 21px;
padding: 4px 7px;
color: b3b3b3;
border: 1px solid #999;
border-radius: 2px 0 0 2px;
background-color: #fbfbfb;
}
.sbtn {
float: left;
width: 50px;
height: 31px;
padding: 0 12px;
margin-left: -1px;
border-radius: 0 2px 2px 0;
border: 1px solid #4d90fe;
background-color: #4d90fe;
cursor: pointer;
display: inline-block;
font-size: 12px;
vertical-align: middle;
color: #f3f7fc;
position: absolute;
}
.sbtn:hover {
background: #4084f2
}
</style>
</head>
<body>
<form action="#" method="get" class="search_form"> <input type="text" name="s" class="sinput"
placeholder="输入 回车搜索" autofocus x-webkit-speech> <input type="submit" value="搜索" class="sbtn">
</form>
</body>
</html>
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/10280.html
微信扫一扫 
支付宝扫一扫 