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 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
php使用google地图应用实例
2014/12/31 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
小程序实现多选框功能
2018/10/30 Javascript
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
详解Python中的文件操作
2021/01/14 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
Java基础面试题
2014/07/19 面试题
给交警的表扬信
2014/01/12 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
音乐教师个人总结
2015/02/06 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫