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自定义滚动条样式写法
Dec 25 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
纯html+css实现打字效果
Aug 02 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
无线电的诞生过程
2021/03/01 无线电
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
js中的闭包学习心得
2018/02/06 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
校园演讲稿汇总
2014/05/21 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
债务授权委托书范本
2014/10/17 职场文书
教师党员自我评价范文
2015/03/04 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android