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制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 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
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
深入理解js中this的用法
2016/05/28 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
angularjs 的数据绑定实现原理
2018/07/02 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
农村婚庆司仪主持词
2014/03/15 职场文书
学习十八大演讲稿
2014/09/15 职场文书
代理人委托书
2014/09/16 职场文书
个人批评与自我批评
2014/10/15 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
停水通知
2015/04/16 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书