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实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
前端水印的简单实现代码示例
Dec 02 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
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
javascript 写类方式之十
2009/07/05 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Python 字符串大小写转换的简单实例
2017/01/21 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
浅述python2与python3的简单区别
2018/09/19 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python支持多线程的爬虫实例
2019/12/21 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
如何客观的进行自我评价
2013/12/17 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
写求职信有什么意义
2014/02/17 职场文书
助理政工师申报材料
2014/06/03 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
单位委托函范文
2015/01/29 职场文书
护士自我推荐信范文
2015/03/24 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android