如何利用input标签添加语音录入功能
相信大家现在在浏览网页时都不难看到一些网站的文本框中带有一个话筒(点击话筒可以语音输入内容到文本框中)，下面给大家介绍如何使自己的网站也支持语音输入内容。
现在各大网站都在搜索框中加入了语音输入功能，不过目前只有Chrome 11及以上版本才支持。可以用chrome浏览器在这里试试效果，点击话筒即可：
实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。
<input type="text" x-webkit-speech />
相关的属性设置：
lang
设置语言种类：
<input type="text" x-webkit-speech lang="zh-CN" />
onwebkitspeechchange
语音输入事件，当发声语音改变时触发：
<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />
x-webkit-grammar
语音输入语法，"builtin:search”值使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如
<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />
还有个值："builtin:translate”看到taobao在用，但目前还不清楚是什么意义，有时间再仔细看看W3C的文档。
测试了下效果，语音识别率还不错，但中英夹杂的时候就很悲剧了，而且该服务需要走google的服务器所以有时响应速度很慢，另外在mac中遇到提示“麦克风无法使用”的情况，猜测可能存在一些硬件兼容性问题。总的来说是趣味性大于实用性；比较期待能在手机浏览器上实现这个功能，可以做一些比较有趣的应用。
补充: 经过多个浏览器测试 均未显示小话筒 查资料发现 其实所谓的语音识别 是我们在说话的时候 谷歌浏览器接收语音.然后发送到谷歌后台,谷歌自己写的语音识别系统,然后再将数据返回,而现在的谷歌需要翻墙才能访问官网,所以此功能失效,有兴趣的去看另一个博客吧 .,终结....
如果你觉得我帮到你了，买个肥宅快乐水，怎么样？哈哈哈哈哈哈
如何利用input标签添加语音录入功能相关推荐
- html h5 php 语音录入,H5添加语音输入功能-
这次给大家带来H5添加语音输入功能,H5添加语音输入功能的注意事项有哪些,下面就是实战案例,一起来看一下. 这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实 ...
- html5输入框增加语音,为任意输入框添加语音输入功能
最近大家是否也发现了,百度谷歌等好几个搜索引擎的输入框都有一个语音图标按钮了呢?其实这个功能的技术没有那么高深的,这个技术的实现其实就是HTML5里面的一个标签而已,,点击麦克风就能够进行语音识别了. ...
- HTML5为输入框添加语音输入功能的实现方法
这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法. 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了. 其实很简单,语音识别是ht ...
- html5 语音输入小话筒,科技常识：HTML5为输入框添加语音输入功能的实现方法
今天小编跟大家讲解下有关HTML5为输入框添加语音输入功能的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5为输入框添加语音输入功能的实现方法 的相关资料,希望小伙伴们看 ...
- android h5语音输入,H5添加语音输入功能
这次给大家带来H5添加语音输入功能,H5添加语音输入功能的注意事项有哪些,下面就是实战案例,一起来看一下. 这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实 ...
- 为自己的软件添加语音提示功能
公司的项目,要求为软件添加语音提示功能. 主要有两个思路: 1.直接播放语音文件,如*.mp3或*.wav 2.将输入的字符串转为语音文件 上一家公司做过播放语音文件,但将输入的字符串转换为语音文件感 ...
- html h5 php 语音录入,html5在输入框添加语音输入功能
[导读] 这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法.大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了其实很简单,语音识别是 ...
- HTML5为输入框添加语音输入功能
这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法. 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了. 其实很简单,语音识别是ht ...
- html5输入框增加语音,html5在输入框添加语音输入功能
[导读] 这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法.大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了其实很简单,语音识别是 ...
最新文章
- （已解决torchvision中CIFAR10下载速度慢）如何下载以及使用torchvision导入
- python3 module 'pexpect' has no attribute 'spawn' 解决方法
- C++ IPv4与IPv6的兼容编码（转，出自http://blog.csdn.net/ligt0610/article/details/18667595）...
- MDX 中的重要概念 (MDX)
- rxjs 怎么使用_使用RxJS Observables进行SUPER SAIYAN
- span的取值与赋值（原生js与jquery） - 对比篇
- 计算机检索基础知识,[转载]四 计算机文献检索基础知识（原理、结构和功能）...
- mos 控制交流_MOS管和IGBT管的区别
- cube云原生机器学习平台-架构（三）
- Kubernetes 小白学习笔记（27）--kubernetes的运维-Trouble Shooting方法
- iptables快速记忆总结
- 【Java SE】static成员及代码块
- 小程序倒计时页面跳转
- ros自带到期通知_iPhone自带的8个App，没想到这么好用！
- MPMLink 中 通过 零件号+MBOM版本，查询正确的EBOM版本（相当于对等部件功能）
- SqlServer使用top 100 PERCENT 无法排序的问题
- tangent space与object space
- 英语发音规则---ir字母组合发音规律
- 85寸电视机长宽是多少
- 亚德诺半导体收购竞争对手美信；凯西与拜耳将在华共同推广宝丽亚和启尔畅 | 美通企业日报...