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轻松实现圆角效果
Nov 09 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
canvas实现烟花的示例代码
Jan 16 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 SQLite类
2009/05/07 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
js 异步处理进度条
2010/04/01 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python实现身份证号码解析
2015/09/01 Python
Python制作简易注册登录系统
2016/12/15 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python怎么调用自己的函数
2020/07/01 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
职业生涯规划设计步骤
2014/01/12 职场文书
公证委托书大全
2014/04/04 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
银行自荐信怎么写
2015/03/05 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis