html5的新玩法——语音搜索_HTML5教程
推荐:html5声频audio和视频video等新特性详细说明html5作为下一代web标准,年前轩起了html5热潮;html5声频audio和视频video一直被网友们所关注,本人也是好奇于是搜集整理一些相关的东东,需要了解的朋友可以参考下
谷歌的网站是时逛时新啊,今天在他们首页发现了HTML5的新玩法——语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单只需要在input添加属性x-webkit-speech即可,例子如下:
复制代码 代码如下:www.mb5u.com
<input type="text" x-webkit-speech />
这样你的输入框右边里就多了个「小话筒」,点击的时候就会提示
这时说出来识别后就可以了,我测试下来,中文英语的识别率还挺高的。
语音输入其他属性:
lang这玩意可以强制输入框里面的语音的语言种类,例如
<input type="text" x-webkit-speech lang="zh-CN"/>
语音事件目前已知的只有onwebkitspeechchange,顾名思义,就是语音发生变化时触发的事件,一般可以作为提交
复制代码 代码如下:www.mb5u.com
<input type="text" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/>
这样说完以后就自动搜索了
x-webkit-grammar这个不是语音搜索用的属性,但是可以控制这个输入的语法,例如在做搜索框的话就可以用
复制代码 代码如下:www.mb5u.com
<input type="text" x-webkit-speech x-webkit-grammar="bUIltin:search" />
使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如「的」
这个功能相当有趣,实用就不敢恭维了,主要是因为适用范围太小啊,所以只能希望HTML5尽快统一并应用了。
相关参考:
HTML5 语音搜索(淘宝店语音搜素)
HTML5 语音搜索只需一句代码
分享:html5 button autofocus 属性介绍及应用在html 5中,可以设置当页面加载时,自动焦点到达某个控件中,这个就是autofocus属性了,接下来详细介绍,有需求的朋友可以了解下
相关HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
- 网易微博Web App用HTML5开发的过程介绍
- HTML5 对各个标签的定义与规定:body的介绍
- 关于HTML5的安全问题开发人员需要牢记的
- 关于HTML5的22个初级技巧(图文教程)
- 开发人员所需要知道的HTML5性能分析面面观
- HTML5 Web Database 数据库的SQL语句的使用方法
- HTML5实践-图片设置成灰度图
- HTML5安全介绍之内容安全策略(CSP)简介
- HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
- Bootstrap 学习分享
- input元素的url类型和email类型简介
- 相关链接:
- 教程说明:
HTML5教程-html5的新玩法——语音搜索。