HTML5中x-webkit-speech语音输入功能
如今各大站点都在搜索框中增加了语音输入功能,只是眼下仅仅有Chrome 11及以上版本号才支持。
能够用chrome浏览器在这里试试效果,点击话筒就可以:
实现起来也很easy,为input加入名为 x-webkit-speech 的属性即可了。
<input type="text" x-webkit-speech />
相关的属性设置:
lang
设置语言种类:
<input type="text" x-webkit-speech lang="zh-CN" />
onwebkitspeechchange
语音输入事件,当发声语音改变时触发:
<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />
x-webkit-grammar
语音输入语法,”builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符。比如「的」
<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />
还有个值:”builtin:translate”看到taobao在用,但眼下还不清楚是什么意义,有时间再细致看看W3C的文档。
測试了下效果。语音识别率还不错,但中英夹杂的时候就非常悲剧了,并且该服务须要走google的server所以有时响应速度非常慢,另外在mac中遇到提示“麦克风无法使用”的情况。推測可能存在一些硬件兼容性问题。总的来说是趣味性大于有用性;比較期待能在手机浏览器上实现这个功能,能够做一些比較有趣的应用。
HTML5中x-webkit-speech语音输入功能的更多相关文章
- AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
在AngularJS应用中集成科大讯飞语音输入功能 注:请点击此处进行充电! 前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方 ...
- HTML5为输入框添加语音输入功能
这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法. 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了. 其实很简单,语音识别是ht ...
- toggleClass() 方法做类似于微信扣扣点击语音图标按钮变成切换到语音输入功能,点击键盘图标按钮切换到文字输入状态的效果
就是这种效果的类似. <html><head><script type="text/javascript" src="/jquery/jqu ...
- HoloLens开发手记 - Unity之语音输入
对于HoloLens,语音输入是三大基本输入方式之一,广泛地运用在各种交互中.HoloLens上语音输入有三种形式,分别是: 语音命令 Voice Command 听写 Diction 语法识别 Gr ...
- AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
- HTML5语音输入方法
谷歌的网站是时逛时新啊,今天在他们首页发现了HTML5的新玩法——语音搜索.可惜的是只有webkit核心的浏览器才能使用.用法很简单只需要在input添加属性 x-webkit-speech 即可,例 ...
- 详解HTML5中rel属性的prefetch预加载功能使用
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- MUI - 为textarea添加语音输入和清除的功能
为textarea添加语音输入和清除的功能 mui支持input输入框语音输入和清除的功能,只需要添加相关css类即可. http://www.cnblogs.com/phillyx/ 代码如下 &l ...
随机推荐
- UML中的序列图(时序图)
序列图将交互关系表示为一个二维图.纵向是时间轴,时间沿竖线向下延伸. 横向轴代表了在协作中各独立对象的类元角色.类元角色用生命线表示.当对象存在时,角色用一条虚线表示,当对象的过程处于激活状态时.生命 ...
- Android——隐藏输入法的小技巧
今天偶然在百度地图提供的DEMO里看到这样一段代码.认为确实是个小技巧,就写下来分享一下. 针对的问题: 我们在开发android界面的时候,常常使用EditText控件.然后每次进入这个页面的时候, ...
- Line(扩展欧几里得)
题意:本题给出一个直线,推断是否有整数点在这条直线上: 分析:本题最重要的是在给出的直线是不是平行于坐标轴,即A是不是为0或B是不是为0..此外.本题另一点就是C输入之后要取其相反数,才干进行扩展欧几 ...
- Codeforces Round #338 (Div. 2) B. Longtail Hedgehog 记忆化搜索/树DP
B. Longtail Hedgehog This Christmas Santa gave Masha a magic picture and a pencil. The picture con ...
- pixhawk入门知识
Pixhawk是一种先进的自动驾驶仪,由PX4开放硬件项目设计和3D机器人制造.它具有来自ST公司先进的处理器和传感器技术,以及NuttX实时操作系统,能够实现惊人的性能,灵活性和可靠性控制任何自主飞 ...
- 边框的使用,border-radius,box-shadow,border-image
<html> <head> <meta charset="UTF-8"> <title></ ...
- Servlet的生命周期和Jsp的生命周期
Servlet的生命周期: 1)构造方法(第1次访问) 2)init方法(第1次访问) 3)service方法 4)destroy方法 Jsp的生命周期 1)翻译: jsp->java文件 2) ...
- 利用UncaughtExceptionHandler捕获未try...catch到的异常
public class test { public static void main(String[] args){ Thread thread = new Thread(new MyThread( ...
- Python笔记25-----------创建二维列表【浅copy】和转置
一.创建二维列表 1.二维列表创建第二维的时候,如果采用*2这种方式,这是一种浅复制的方式,同时引用到同一个list,如上图的C. 这种形式,不方便修改C[ i ][ j ]的数据,如果改C[ 0 ] ...
- Test zram at kernel 3.10 4.12
Use ltp to test zram 测试环境: #uname -r 3.10.0-327.ali2010.rc6.alios7.x86_64 没有指定zram algorithm(没有设置), ...