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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
用CSS3画一个爱心
Apr 27 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下MAIL的另一解决方案
2006/10/09 PHP
php数据库连接
2006/10/09 PHP
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
javascript时区函数介绍
2012/09/14 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
python中的闭包函数
2018/02/09 Python
Python实现的质因式分解算法示例
2018/05/03 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
盛大笔试题
2016/11/05 面试题
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
Nginx 匹配方式
2022/05/15 Servers
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android