如今各大站点都在搜索框中增加了语音输入功能,只是眼下仅仅有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语音输入功能的更多相关文章

  1. AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能

    在AngularJS应用中集成科大讯飞语音输入功能 注:请点击此处进行充电! 前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方 ...

  2. HTML5为输入框添加语音输入功能

    这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法. 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了. 其实很简单,语音识别是ht ...

  3. toggleClass() 方法做类似于微信扣扣点击语音图标按钮变成切换到语音输入功能,点击键盘图标按钮切换到文字输入状态的效果

    就是这种效果的类似. <html><head><script type="text/javascript" src="/jquery/jqu ...

  4. HoloLens开发手记 - Unity之语音输入

    对于HoloLens,语音输入是三大基本输入方式之一,广泛地运用在各种交互中.HoloLens上语音输入有三种形式,分别是: 语音命令 Voice Command 听写 Diction 语法识别 Gr ...

  5. AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能

    在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...

  6. HTML5语音输入方法

    谷歌的网站是时逛时新啊,今天在他们首页发现了HTML5的新玩法——语音搜索.可惜的是只有webkit核心的浏览器才能使用.用法很简单只需要在input添加属性 x-webkit-speech 即可,例 ...

  7. 详解HTML5中rel属性的prefetch预加载功能使用

    在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率 ...

  8. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  9. MUI - 为textarea添加语音输入和清除的功能

    为textarea添加语音输入和清除的功能 mui支持input输入框语音输入和清除的功能,只需要添加相关css类即可. http://www.cnblogs.com/phillyx/ 代码如下 &l ...

随机推荐

  1. 树莓派 rtl8188eu 芯片wifi驱动

    总算是找到了.现拿出来分享.參考地址:https://www.raspberrypi.org/forums/viewtopic.php? p=462982#p462982 下载的地址是:https:/ ...

  2. poj 2683 Ohgas&#39; Fortune 利率计算

    水题. 代码: //poj 2683 //sep9 #include <iostream> using namespace std; int main() { int cases; sca ...

  3. C++中 pair 的使用方法

    #include<iostream> #include<string> #include<map> using namespace std; // pair简单讲就 ...

  4. HDU 5493 Queue 树状数组+二分

    Queue Problem Description N people numbered from 1 to N are waiting in a bank for service. They all ...

  5. java格式化时间到毫秒

    转自:https://blog.csdn.net/iplayvs2008/article/details/41910835 java格式化时间到毫秒: SimpleDateFormat formatt ...

  6. C#比较二个数组并找出相同或不同元素的方法

    这篇文章主要介绍了C#比较二个数组并找出相同或不同元素的方法,涉及C#针对数组的交集.补集等集合操作相关技巧,非常简单实用, 具有一定参考借鉴价值,需要的朋友可以参考下 " }; " ...

  7. 关于SqlBulkCopy的测试

    最近要做.net关于sql大量插入,找到了sqlbulkcopy(自己google下,应该很多说明了)这个好东西,于是测试下性能,用了三个方法对比: 1)直接用ado.net,for循环N次进行单条插 ...

  8. Zeplin(for Windows)无缝集成到了 Adobe XD

    Zeplin(for Windows)无缝集成到了 Adobe XD 大约6个月前,推出了 Zeplin 的新Adobe XD CC集成.从那时起,数十万个设计从Adobe XD导出到Zeplin.Z ...

  9. 关于C++程序运行程序是出现的this application has requested the runtime to terminate it in an unusual way. 异常分析

    今天运行程序是出现了this application has requested the runtime  to terminate it in an unusual way. 的异常报告,以前也经常 ...

  10. Eclipse中重置(还原)GIT分支

    重置(还原)GIT分支: 1.  右击项目——Team——Reset…: 2.  在弹出的Reset框中选择要重置(还原)的分支——Reset,即可完成.