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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 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
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
js实现放大镜特效
2017/05/18 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
python爬虫实现获取下一页代码
2020/03/13 Python
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
六道php面试题附答案
2014/06/05 面试题
物业管理计划书
2014/01/10 职场文书
迟到检讨书900字
2014/01/14 职场文书
军训感想500字
2014/02/20 职场文书
清明节演讲稿
2014/05/27 职场文书
教师学期末个人总结
2015/02/13 职场文书
保安辞职信范文
2015/02/28 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python