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实现字体颜色渐变的实现
Mar 09 HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
详解css3 object-fit属性
Jul 27 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 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
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
js正确获取元素样式详解
2009/08/07 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
Django中处理出错页面的方法
2015/07/15 Python
python批量提取word内信息
2015/08/09 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python模拟三级菜单效果
2017/09/11 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
python实现图像全景拼接
2020/03/27 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
高三自我鉴定怎么写
2013/10/19 职场文书
美发活动策划书
2014/01/14 职场文书
真诚的求职信
2014/07/04 职场文书
实习单位推荐信
2015/03/27 职场文书
酒店宣传语大全
2015/07/13 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
SQL Server内存机制浅探
2022/04/06 SQL Server