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实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 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基于工厂模式实现的计算器实例
2015/07/16 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python实现求最长回文子串长度
2018/01/22 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
缴纳养老保险的证明
2014/01/10 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
年终晚会主持词
2014/03/25 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
创先争优活动个人总结
2015/03/04 职场文书