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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 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
对盗链说再见...
2006/10/09 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
材料物理专业个人求职信
2013/12/15 职场文书
物流合作计划书
2014/01/10 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
信用卡收入证明范本
2015/06/12 职场文书
六一儿童节致辞
2015/07/31 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript