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字体效果的设置方法小结
Jun 13 HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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 操作调试的方法
2012/07/12 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
常规表格多表头查询示例
2014/02/21 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
在python中安装basemap的教程
2018/09/20 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
自学考试自我鉴定范文
2013/09/26 职场文书
教学大赛获奖感言
2014/01/15 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
幼师中班个人总结
2015/02/12 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书