这里介绍的是大家以后要用到的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. 吴恩达机器学习笔记18-多类别分类:一对多(Multiclass Classification_ One-vs-all)

    对于之前的一个,二元分类问题,我们的数据看起来可能是像这样: 对于一个多类分类问题,我们的数据集或许看起来像这样: 我用3 种不同的符号来代表3 个类别,问题就是给出3 个类型的数据集,我们如何得到一 ...

  2. Python学习笔记【第四篇】:基本数据类型

    变量:处理数据的状态 变量名 = 状态值 类型 python中有以下基本数据类型: 1:整形 2:字符串类型 3:Bool类型 4:列表 5:元祖(不可变) 6:字典(无序) 7:集合 (无序.不重复 ...

  3. MFCC特征参数提取流程概述

      一 概念概述: 在语音识别(Speech Recognition)和话者识别(Speaker Recognition)方面,最常用到的语音特征就是梅尔倒谱系数(Mel-scale Frequenc ...

  4. 使用C# (.NET Core) 实现迭代器设计模式 (Iterator Pattern)

    本文的概念来自深入浅出设计模式一书 项目需求 有两个饭店合并了, 它们各自有自己的菜单. 饭店合并之后要保留这两份菜单. 这两个菜单是这样的: 菜单项MenuItem的代码是这样的: 最初我们是这样设 ...

  5. Kaazing Gateway简单使用

    Kaazing GateWay是一种提供跨平台跨浏览器WebSocket支持的网关,由Java编写,介绍一下Kaazing GateWay的安装配置和简单使用,哪里说得不对,还请指出. 1. 安装 a ...

  6. MongoDB加auth权限

    目录 裸奔有多危险 mongoDB修改默认端口号 关闭MongoDB 重启MongoDB 设置密码 吹个牛B,自己的MongoDB裸奔了快半年,从未遭受黑客攻击.也不知道是自己运气好,还是黑客对我的乞 ...

  7. Chapter 4 Invitations——1

    In my dream it was very dark, and what dim light there was seemed to be radiating from Edward's skin ...

  8. Leetcode 1-10

    这篇文章介绍Leetcode1到10题的解决思路和相关代码. 1. Two sum 问题描述:给定一个整数数组,返回两个数字的索引,使它们加起来等于一个特定的目标. 例子: Given nums = ...

  9. Consul安装使用

    安装 安装环境: Mac 我参照官网下载,然后解压,然后添加到PATH,并不能用.最终使用brew安装成功. brew install consul 安装成功后,文件位于/usr/local/Cell ...

  10. linux 命令 — sed

    sed stream editor,流编辑器 查找替换 sed 's/pattern/replace_string/' file 替换每一行第一次出现的pattern,将替换后的文本输出到stdout ...