这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法。

大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了。

其实很简单,语音识别是html5的基本功能,它的用法是

<input type=”text” speech x-webkit-speech />

如果喜欢XHTML类似的语法,可以这样表示

<input type=”text” x-webkit-speech=”x-webkit-speech” />

语音识别在十年前是让人觉得不可思议的事情,即便是前些年,网页上的语音识别也只能使用其他方式实现,比如使用Flashplayer等等。不过现在,获取语音只需要简单的给输入框加入一个属性标签,就能够进行识别了。

移动设备如手机上的浏览器,只要支持html5,同样也应该支持语音识别。试试你的Android浏览这个网页?

另外,如果想用javascript获取语音识别这个事件的结束,可以使用onwebkitspeechchange

<input type=”text” speech x-webkit-speech onwebkitspeechchange=”alert(this.value)” />

转载地址:http://www.php100.com/html/program/html5/2013/0905/5423.html

HTML5为输入框添加语音输入功能的更多相关文章

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

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

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

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

  3. HTML5中x-webkit-speech语音输入功能

    如今各大站点都在搜索框中增加了语音输入功能,只是眼下仅仅有Chrome 11及以上版本号才支持. 能够用chrome浏览器在这里试试效果,点击话筒就可以: 实现起来也很easy,为input加入名为 ...

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

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

  5. HTML5语音输入方法

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

  6. 串口计时工具Grabserial简介及修改(添加输入功能)

    Grabserial是Tim Bird用python写的一个抓取串口的工具,这个工具能够为收到的每一行信息添加上时间戳. 如果想对启动时间进行优化的话,使用这个工具就可以简单地从串口输出分析出耗时. ...

  7. 从头认识Spring-3.8 简单的AOP日志实现(注解版)-扩展添加检查订单功能,以便记录并检測输入的參数

    这一章节我们讨论一下扩展添加检查订单功能,以便记录并检測输入的參数. 1.domain 蛋糕类: package com.raylee.my_new_spring.my_new_spring.ch03 ...

  8. 从头认识Spring-3.4 简单的AOP日志实现-扩展添加检查订单功能,以便记录并检測输入的參数

    这一章节我们再上一个章节的基础上加上一个检查订单功能 1.domain 蛋糕类: package com.raylee.my_new_spring.my_new_spring.ch03.topic_1 ...

  9. 从零开始实现基于微信JS-SDK的录音与语音评价功能

    最近接受了一个新的需求,希望制作一个基于微信的英语语音评价页面.即点击录音按钮,用户录音说出预设的英文,根据用户的发音给出对应的评价.以下是简单的Demo: ![](reecode/qrcode.pn ...

随机推荐

  1. Java学习笔记三:运算符

    1.算术运算符: GitHub代码练习地址:https://github.com/Neo-ML/JavaPractice/blob/master/OperPrac01.java +  -  *  /  ...

  2. QMQ去哪儿网-mq中间件(启动失败)

    简介 去哪儿网近日宣布开源其内部广泛使用的消息中间件 QMQ .QMQ 自 2012 年诞生以来在去哪儿网所有业务场景中广泛的应用,包括跟交易息息相关的订单场景: 也包括报价搜索等高吞吐量场景.目前在 ...

  3. Python 游戏之旅(Pygame)

    Pygame是跨平台Python模块,专为电子游戏设计,包含图像.声音.建立在SDL基础上,允许实时电子游戏研发而无需被低级语言(如机器语言和汇编语言)束缚.基于这样一个设想,所有需要的游戏功能和理念 ...

  4. 我面试过没有上万人也有十几个,简历要这么写才有hr要你

    今天终于有时间好好给大家写写关于如何写简历,给自己加分了. 这篇文章拖了很久了应该说,本来想在上周写的,但是事情实在是太多,又不想草草了事,所以搁置到现在.今天早上正好空出来了,就马上给大家码出来了. ...

  5. .NET图平台下的图像处理工具---强大的Emgucv

    图像一直与时代相伴,图形化的应用软件也重不可缺.对于MFC.Delphi.Lazarus.Qt大家可能已经耳熟能详.对于很多图像处理的开源库,很多都是用C\C++写的,而.Net下的开源库以前很少了解 ...

  6. MapReduce的二次排序

    附录之前总结的一个例子: http://www.cnblogs.com/DreamDrive/p/7398455.html 另外两个有价值的博文: http://www.cnblogs.com/xux ...

  7. Spring 事务传播实践分析

    事务管理是应用系统开发中必不可少的一部分.事物将若干的数据库操作作为一个整体控制,一起成功或一起失败.事物有以下特性 原子性:指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生.   ...

  8. vue-10-路由

    1 原始方式 1), 路由, vue-router 2 简单安装方式, 但先讲原理 cnpm install --save vue-router 2), 引用 在main.js中 // 引入 rout ...

  9. Win3内存管理之私有内存跟共享内存的申请与释放

    Win3内存管理之私有内存跟共享内存的申请与释放 一丶内存简介私有内存申请 通过上一篇文章.我们理解了虚拟内存与物理内存的区别. 那么我们有API事专门申请虚拟内存与物理内存的. 有私有内存跟共享内存 ...

  10. 【原创】驱动枚举之EnumServicesStatusEx

    BOOL WINAPI EnumServicesStatusEx( _In_ SC_HANDLE hSCManager, _In_ SC_ENUM_TYPE InfoLevel, _In_ DWORD ...