以前语音输入功能虽然没用过,但是看上去很高级的样子,有了智能手机之后,在ios和android中的语音输入,特别是iPhone的Siri,让一切变得如此简单,嘎嘎。

当然我不是在这里要实现如此强悍的功能,只是说说html5中的语音输入功能speech属性,大家先可以看看W3C文档:http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html

看上去很强大的样子,不过不要高兴的太早,因为大部分的浏览器还没有实现这些接口,目前可以用的只有chrome(11版本以上)的私有属性:x-webkit-speech。例如我们看看淘宝在chrome下的搜索框,如图:

实现语音输入也非常简单:

<input id="q" name="q"  x-webkit-speech  />

简单的来说,我们只要在input元素上加上x-webkit-speech属性就可以了,当然你如果用xhtml,那么标准的写法是:x-webkit-speech=”x-webkit-speech”;

<input id="q" name="q" x-webkit-speech=”x-webkit-speech” />

其他属性:

lang
设置语言种类:

      lang="zh-CN"

x-webkit-grammar
语音识别语法,取值:

  • translations—说一个词,并把它翻译
  • definitions—说一个词,并且获得定音
  • directions—说一个地址,要求行车路线
  • dictation

事件

onwebkitspeechchange

语音输入事件,当发声语音改变时触发:

关于HTML5 语音搜索的问题的更多相关文章

  1. html5 语音搜索

    开始以为是接口什么的,原来这就是语言搜索. 只需要在input加上x-webkit-speech <input type="text" class="text&qu ...

  2. 淘宝语音搜索的实现——html5

    作为一个专业的淘宝控,不知道从什么时候开始发现淘宝上居然还有语音搜索,好吧,因为好奇心作祟还是想一探究竟.不过我想仔细一点的人,都会发现在只有在webkit内核的浏览器上有,原因是它只支持webkit ...

  3. HTML5语音输入方法

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

  4. 将语音搜索集成到Google Now中

    原文标题:Use Voice Search to integrate with Google Now 原文链接:http://antonioleiva.com/voice_search_google_ ...

  5. Android语音搜索

    前言 在现有的软件的搜索框中基本上都会加上语音搜索的图标,以方便用户输入.我们xxxx的搜索框其实也可以借鉴这样的输入方式,提高用户体验.语音识别有3种方式实现①使用intent调用语音识别程序;②通 ...

  6. 【转】.net 实现 语音搜索(仅限WebKit内核浏览器)

    <input type="text" class="text" name="value_2" id="value_2&quo ...

  7. x-webkit-speech语音搜索

    如果你没看到语音图标说明你的浏览器不支持x-webkit-speech 换个chrome你会发现输入框的右侧出现语音小图标.

  8. HTML5——语音输入

    一.使用方式: <input type="text" x-webkit-speech /> 二.属性 1.lang属性:语言种类 <input type=&quo ...

  9. 【转】HTML5的语音输入 渐进使用HTML5语言识别, so easy!

    转自: 本文地址:http://www.zhangxinxu.com/wordpress/?p=2408 一.本不想写此文 HTML5语音识别(现在一般用在搜索上),目前相关介绍还是挺多的.为何呢?因 ...

随机推荐

  1. Mac OS X Mavericks使用手册

    基本信息 作者: 施威铭研究室 出版社:清华大学出版社 ISBN:9787302386018 上架时间:2014-12-30 出版日期:2015 年1月 开本:16 版次:1-1 所属分类: 计算机 ...

  2. Unity PlayerPrefs类进行扩展(整个对象进行保存)

    盘子脸在制作单机游戏的时候,先以为没有好多数据需要保存本地. 就没有使用json等格式自己进行保存. 使用PlayerPrefs类,但是后面字段越来越多的时候. PlayerPrefs保存就发现要手动 ...

  3. openldap---ldapsearch使用

    ldapsearch 參数表 下表描写叙述能够用于 ldapsearch 的区分大写和小写的參数. 參数 用途 -? 打印关于使用 ldapsearch 的帮助. -a deref 指定别名反向引用. ...

  4. 关于Latch

    Latch是什么 Latch是SQL Server引擎保证内存中的结构的一致性的轻量同步机制.比如索引,数据页和内部结构(比如非叶级索引页).SQL Server使用Buffer Latch保护缓冲池 ...

  5. linux hash_map

    在linux下的hash_map hash_map本身以前本身不属于标准库,是后来引入的.有两种可能:一种可能它被放在了stdext名空间里,那么你就要使用using namespace stdext ...

  6. SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问的解决方案

    今天写了一个excel表的导入功能,结果在excel表中的内容导入到页面时报错:SQL  Server 阻止了对组件 'Ad Hoc Distributed Queries' 的  STATEMENT ...

  7. 如何排版 微信公众号「代码块」之 MarkEditor

    前段时间写过一篇文章 如何排版微信公众号「代码块」,讲的是如何使用浏览器插件 Markdown Here 来排版代码块.虽然用 Markdown Here 排版出来的样式还不错,但存在一个问题,就是代 ...

  8. HTML - EMail链接

    HTML - EMail链接 HTML Email 标签 在标签中,提供一个email地址,你就可以让用户发送邮件,格式是: <a href= "mailto:jack@kingyar ...

  9. jBPM4.4与SSH2整合

    整合jBPM的目的就是能够通过注入的方式得到ProcessEngine实例,因为ProcessEngine是jbpm 的核心. 整合步骤: 1.新建web程,搭建好SSH2环境 2.导入jbpm相关的 ...

  10. 在[self addsubView:xxx]中,self.name 和 _name的区别

    在[self addsubView:xxx]中,self.name 和 _name的区别self.name 会调用重写的getter方法,而_name添加的只是_name 这个成员变量