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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 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之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php date()日期时间函数详解
2010/05/16 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python生成验证码实例
2014/08/21 Python
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python中一行和多行import模块问题
2018/04/01 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
如何表示python中的相对路径
2020/07/08 Python
金融学专科生自我鉴定
2014/02/21 职场文书
企业办公室岗位职责
2014/03/12 职场文书
学生安全承诺书
2014/05/22 职场文书
英文商务邀请函范文
2015/01/31 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
运动会通讯稿50字
2015/07/20 职场文书
企业文化学习心得体会
2016/01/21 职场文书
2022年四月新番
2022/03/15 日漫
SQL Server内存机制浅探
2022/04/06 SQL Server