以前语音输入功能虽然没用过,但是看上去很高级的样子,有了智能手机之后,在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. CNN(卷积神经网络)、RNN(循环神经网络)、DNN(深度神经网络)的内部网络结构有什么区别?

    https://www.zhihu.com/question/34681168 CNN(卷积神经网络).RNN(循环神经网络).DNN(深度神经网络)的内部网络结构有什么区别?修改 CNN(卷积神经网 ...

  2. UML--核心元素之参与者Actor

    参与者(actor):在系统之外与系统交互的某人或某事物.例如,管理员,用户等等. 参与者位于边界之外,边界之内的都不叫参与者.用一个词来形容更准确,主角.也就是只有主动启动了这个业务的人,才是参与者 ...

  3. spring 4 泛型注入

    最近对系统进行改造,发现在泛型实例初始化的时候,得不到想要的泛型.或者需要强制转换. spring 4 开始支持泛型对象初始化,初始化方法如下: 注:使用配置文件的方法暂时还没有发现,下面是使用jav ...

  4. mybatis和ibatis区别

     ibatis本是apache的一个开源项目,2010年这个项目由apache software foundation 迁移到了google code,并且改名为mybatis.  1.Mybat ...

  5. Find Median from Data Stream 解答

    Question Median is the middle value in an ordered integer list. If the size of the list is even, the ...

  6. POJ-2955括号匹配问题(区间DP)

    Brackets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4834   Accepted: 2574 Descript ...

  7. pyqt 动态显示时间方法例子学习

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' import sys,datetime from PyQt4.QtC ...

  8. Dom4j解析xml格式的字符串【java】

    一般我们会使用dom4j.SAX.w3c来解析xml文件,网上也大多提供此类解决方案. 但在实际项目中,也有会解析xml格式的字符串报文的. 比如,有如下字符串: String = "< ...

  9. Find the maximum(规律,大数)

    Find the maximum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others) ...

  10. unity3d 建树篇

    今天碰到有人问这个问题,然后我经过一番折腾,找到了方法.例如以下: 有学过Unity3d的同学生都知道我们在对地形拖拉树木等表层时,其树木在我们实例执行中,它们都是能够任其他物体穿过. 这是为什么.相 ...