• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > H5实现输入框添加语音功能的方法详解

H5实现输入框添加语音功能的方法详解

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5输入框,html5语音输入等相关知识,匿名希望在学习及工作中可以帮助到您
本文给大家介绍如何使用html5为输入框添加语音输入功能,实现方法很简单,需要的朋友参考下本文

这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法。

大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了。

其实很简单,语音识别是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)” />

【相关推荐】

1. Html5免费视频教程

2. H5制作虚拟键盘时出现输入框遮挡的情况怎么办?

3. HTML5实现微信播放全屏的方法详解

4. 关于H5新标签的浏览器兼容问题的详解

5. 教你如何用H5无刷新改变当前url的实例详解

以上就是H5实现输入框添加语音功能的方法详解的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5为输入框添加语音输入功能的实现方法
  • H5实现输入框添加语音功能的方法详解
  • HTML5为输入框添加语音输入功能的实现方法

相关文章

  • 2018-12-03ios/andriod开发和web前端选择哪个?
  • 2018-12-03HTML5 API浏览器支持情况检测的详情介绍
  • 2018-12-03HTML5实现简单图片上传所遇到的问题及解决办法 _html5教程技巧
  • 2017-08-06html5记忆翻牌游戏实现思路及代码
  • 2018-12-03关于性能发挥的4篇文章推荐
  • 2018-12-03HTML5 input元素类型:email及url介绍_html5教程技巧
  • 2018-12-03html5实现数据存储实例代码
  • 2018-12-03HTML5本地数据库实例详解
  • 2018-12-03分享HTML5实现弹出框的效果示例
  • 2017-08-06Html5实现如何在两个div元素之间拖放图像

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 知名网站的移动前端自适应解决方案和比较
    • HTML5 Canvas平移,放缩,旋转图文代码详情
    • 目前的 HTML5 开发跟一年前比进展如何,国内国外有没有区别?
    • (Server-sent Events)浅谈H5 中的服务器推送事件
    • HTML5 Canvas之测试浏览器是否支持Canvas的方法
    • 用canvas实现图片滤镜效果附演示_html5教程技巧
    • HTML5 SVG响应式路径过渡动画幻灯片特效
    • HTML5中Localstorage的使用教程
    • 为什么把 Script 标签放在 body 结束标签之后 html 结束标签之前?
    • HTML5技术之图像处理:一个滑动的拼图游戏

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有