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 18 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 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函数指定默认值方法的小例子
2013/12/04 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
Python使用pymysql小技巧
2017/06/04 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Python对象的属性访问过程详解
2020/03/05 Python
python Paramiko使用示例
2020/09/21 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
视图的作用
2014/12/19 面试题
2014婚礼司仪主持词
2014/03/14 职场文书
研究生求职自荐书
2014/06/23 职场文书
计生工作先进事迹
2014/08/15 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
护士年终考核评语
2014/12/31 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python