HTML5为输入框添加语音输入功能的实现方法


Posted in HTML / CSS onFebruary 06, 2017

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

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

HTML5为输入框添加语音输入功能的实现方法

其实很简单,语音识别是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)” />

以上所述是小编给大家介绍的HTML5为输入框添加语音输入功能的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 #HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 #HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 #HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 #HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 #HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 #HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 #HTML / CSS
You might like
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python 数据结构之堆栈实例代码
2017/01/22 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python微信公众号开发平台
2018/01/25 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Python中bisect的使用方法
2019/12/31 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
Java程序员综合测试题
2014/04/25 面试题
技术比武方案
2014/05/19 职场文书
债务纠纷委托书
2014/08/30 职场文书
2014年营业员工作总结
2014/11/18 职场文书
导游词怎么写
2015/02/04 职场文书
导游词300字
2015/02/13 职场文书
留学推荐信中文范文
2015/03/26 职场文书
百日宴上的祝酒词
2015/08/10 职场文书