html5的新玩法——语音搜索


Posted in HTML / CSS onJanuary 03, 2013

谷歌的网站是时逛时新啊,今天在他们首页发现了HTML5的新玩法——语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单
只需要在input添加属性x-webkit-speech即可,例子如下:

复制代码
代码如下:

<input type="text" x-webkit-speech />

这样你的输入框右边里就多了个「小话筒」,点击的时候就会提示
html5的新玩法——语音搜索
这时说出来识别后就可以了,我测试下来,中文英语的识别率还挺高的。
语音输入其他属性
lang这玩意可以强制输入框里面的语音的语言种类,例如
<input type="text" x-webkit-speech lang="zh-CN"/>
语音事件目前已知的只有onwebkitspeechchange,顾名思义,就是语音发生变化时触发的事件,一般可以作为提交
复制代码
代码如下:

<input type="text" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/>

这样说完以后就自动搜索了
x-webkit-grammar这个不是语音搜索用的属性,但是可以控制这个输入的语法,例如在做搜索框的话就可以用
复制代码
代码如下:

<input type="text" x-webkit-speech x-webkit-grammar="bUIltin:search" />

使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如「的」
这个功能相当有趣,实用就不敢恭维了,主要是因为适用范围太小啊,所以只能希望HTML5尽快统一并应用了。
相关参考:
HTML5 语音搜索(淘宝店语音搜素)
HTML5 语音搜索只需一句代码
HTML / CSS 相关文章推荐
css3 中实现炫酷的loading效果
Apr 26 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 #HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 #HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 #HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 #HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 #HTML / CSS
html5 application cache遇到的严重问题
Dec 26 #HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 #HTML / CSS
You might like
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
python 利用zmail库发送邮件
2020/09/11 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
集团公司人力资源部岗位职责
2014/01/03 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
内勤岗位职责范本
2015/04/13 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
中学校园广播稿
2015/08/18 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书