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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 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中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
浅析PHP文件下载原理
2014/12/25 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python绘制3D图形
2018/05/03 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
在python image 中实现安装中文字体
2020/05/16 Python
python接入支付宝的实例操作
2020/07/20 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
单位消防安全制度
2014/01/12 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
新郎新娘答谢词
2015/01/04 职场文书
公务员年度个人总结
2015/02/12 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫