Chrome — 让<input>标签支持语音搜索 x-webkit-speech
2012-10-27 16:25
323 查看
使用Chrome浏览器且细心的骚年应该都会发现一些大的网站已经有了语音搜索功能了,例如淘宝、360搜索等等。不过只有Chorme11以上才能够支持。
实现起来非常简单,为input添加名为 x-webkit-speech 的属性就行了。
可以用Chrome浏览器点击话筒体验一下语音搜索。
相关属性设置:
设置语言种类:lang
<input type="text" x-webkit-speech lang="zh-CN" />
设置发声语音改变时触发:onwebkitspeechchange
<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />
语音输入语法,”builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如“的”、“啦”:x-webkit-grammar
<input type="text" class="text" x-webkit-speech x-webkit-grammar="bUIltin:search">
需要注意的是,这个语音识别实际上是调用谷歌的api,语言识别率还不错,因为需要走google的服务器。所有有时候会遇到加载很慢的情况。就现阶段来说,这个功能暂时还只能说趣味性大于实用性。
另外,就是当具有语音搜索的页面是iframe页面时,点击麦克风后,“请开始说话”这浮动层就不跟随input输入框了。
实现起来非常简单,为input添加名为 x-webkit-speech 的属性就行了。
可以用Chrome浏览器点击话筒体验一下语音搜索。
相关属性设置:
设置语言种类:lang
<input type="text" x-webkit-speech lang="zh-CN" />
设置发声语音改变时触发:onwebkitspeechchange
<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />
语音输入语法,”builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如“的”、“啦”:x-webkit-grammar
<input type="text" class="text" x-webkit-speech x-webkit-grammar="bUIltin:search">
需要注意的是,这个语音识别实际上是调用谷歌的api,语言识别率还不错,因为需要走google的服务器。所有有时候会遇到加载很慢的情况。就现阶段来说,这个功能暂时还只能说趣味性大于实用性。
另外,就是当具有语音搜索的页面是iframe页面时,点击麦克风后,“请开始说话”这浮动层就不跟随input输入框了。
相关文章推荐
- 语音搜索--x-webkit-speech 在chrome中应用
- 【HTML】表单中<input>标签、组件格式化、表单提交方式、浏览器服务端交互方式
- (25)HTML标签详解之<form><input><label><fieldset><legend>
- 如何使用CSS设置<input>标签的背景小图标 简单
- 关于为什么有些<a>和<input>标签中的onclick方法会有return,如<a class = '' onclick = upload();return>
- SpringMVC<from:form>表单标签和<input>表单标签简介
- java中格式化数字、jsp中格式化数据、<input>标签
- JSP 2.0 web.xml不再直接支持<taglib>标签配置
- head标签中<meta>中IE=edge,chrome=1详解
- Chrome 自带的 user agent stylesheet 与 html中<!DOCTYPE>标签
- android支持html的<input type="file">标签
- 【HTML5】<input>标签中的Require必填项
- HTML标签之——<input>
- 在<input>标签上增加<autocorrect>属性并设置为关闭,来禁用自动更正
- 如何监听Element组件<el-input>标签的回车事件
- HTML <frameset> 标签 - HTML5 不支持
- 正则表达式获取字符串中html<input>标签指定value值
- Chrome 37 Beta: 使用Windows的DirectWrite和支持<dialog>元素
- 让 WebStorm 支持 <style> 标签内的 SCSS/SASS 语法
- 对部分<input>标签添加onclick事件