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 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
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
PHP的面试题集
2006/11/19 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
python字符串常用方法
2018/06/14 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python+mysql实现教务管理系统
2019/02/20 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
奖金申请报告模板
2015/05/15 职场文书
教师见习总结范文
2015/06/23 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
Redis入门基础常用操作命令整理
2022/06/01 Redis