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

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

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

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

这里介绍的是大家以后要用到的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为输入框添加语音输入功能的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对微课江湖的支持!

更多HTML5为输入框添加语音输入功能的实现方法相关文章请关注微课江湖!

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

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

相关文章

  • 2018-12-03关于HTML5你不得不知的事
  • 2018-12-03【HTML5】3D模型--百行代码实现旋转立体魔方实例
  • 2018-12-03Web 平台是否会在移动平台上最终超过应用平台?为什么?
  • 2018-12-03在Vue中使用Compass
  • 2018-12-03Html5新标签datalist相关用法介绍
  • 2018-12-03移动端页面布局应该如何操作
  • 2018-12-03浅谈html5 响应式布局_html5教程技巧
  • 2018-12-03h5整理的笔记
  • 2018-12-03Html5页面二次分享的实现
  • 2018-12-03Html5学习之旅-html5的留言记事本开发(17)

文章分类

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

最近更新的内容

    • html5 canvas移动浏览器上实现图片压缩上传_html5教程技巧
    • html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)_html5教程技巧
    • 移动端Html5页面生成图片解决方案
    • 『HTML5梦幻之旅』-动感圆圈
    • HTML5 游戏移植为 iOS 原生应用,需要注意哪些地方?有什么经验可以分享?
    • HTML5中对accesskey属性的解释与规定
    • HTML5 Canvas——用路径描画线条实例介绍_html5教程技巧
    • HTML5/CSS3 诱人的实例 -模仿优酷视频截图功能的详解
    • html5推出queryselectall之后,jQuery的作用是否减小了?
    • HTML5组件Canvas实现图像灰度化(步骤+实例效果)

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

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