• 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

本文主要包含h5语音功能等相关知识,匿名希望在学习及工作中可以帮助到您
这里介绍的是大家以后要用到的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为输入框添加语音输入功能相关文章请关注微课江湖!

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

相关文章

  • 2018-12-03如何使用HTML5中postMessage实现Ajax中的POST跨域问题的详细介绍
  • 2018-12-03在哪里可以找到做针对企业内训的讲html5和javascript的老师?
  • 2018-12-03详细介绍Html5元素及基本语法
  • 2018-12-03如何提取图片的主题色?
  • 2017-08-06HTML5 语音搜索只需一句代码
  • 2017-08-06HTML5中的音频和视频媒体播放元素小结
  • 2018-12-03有支持M3U8格式的HTML5播放器吗?
  • 2017-08-02HTML5的本地存储
  • 2017-08-06HTML5: Web 标准最巨大的飞跃
  • 2018-12-03基于HTML5鼠标点击淡入淡出切换代码

文章分类

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

最近更新的内容

    • HTML5 canvas画布的宽高为什么写在<canvas>标签里的详细介绍
    • 详解HTML5实现橡皮擦的擦除效果的示例代码(图)
    • html5如何制作一份邀请函?制作邀请函的方法(代码示例)
    • AngularJS中使用HTML5摄像头拍照
    • html5使用canvas实现跟随光标跳动的火焰效果
    • 使用html5 canvas创建太空游戏的示例_html5教程技巧
    • 快速玩转网页样式
    • svg中<marker>元素的使用及marker属性的介绍
    • AjaxUpLoad.js怎么实现文件上传
    • html5 WebWorkers防止浏览器假死的示例代码分享

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

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