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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
html+css 实现简易导航栏功能
Apr 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 文件扩展名 获取函数
2009/06/03 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
JS module的导出和导入的实现代码
2019/02/25 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
python字典序问题实例
2014/09/26 Python
python实现查询苹果手机维修进度
2015/03/16 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
学生自我评语
2015/01/04 职场文书
公司更名通知函
2015/04/24 职场文书
爱心捐书倡议书
2015/04/27 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
Python访问Redis的详细操作
2021/06/26 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers