如何利用input标签添加语音录入功能
2018-03-02 11:49
477 查看
相信大家现在在浏览网页时都不难看到一些网站的文本框中带有一个话筒(点击话筒可以语音输入内容到文本框中),下面给大家介绍如何使自己的网站也支持语音输入内容。现在各大网站都在搜索框中加入了语音输入功能,不过目前只有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中遇到提示“麦克风无法使用”的情况,猜测可能存在一些硬件兼容性问题。总的来说是趣味性大于实用性;比较期待能在手机浏览器上实现这个功能,可以做一些比较有趣的应用。
补充: 经过多个浏览器测试 均未显示小话筒 查资料发现 其实所谓的语音识别 是我们在说话的时候 谷歌浏览器接收语音.然后发送到谷歌后台,谷歌自己写的语音识别系统,然后再将数据返回,而现在的谷歌需要翻墙才能访问官网,所以此功能失效,有兴趣的去看另一个博客吧 .,终结....
相关的属性设置:
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中遇到提示“麦克风无法使用”的情况,猜测可能存在一些硬件兼容性问题。总的来说是趣味性大于实用性;比较期待能在手机浏览器上实现这个功能,可以做一些比较有趣的应用。
补充: 经过多个浏览器测试 均未显示小话筒 查资料发现 其实所谓的语音识别 是我们在说话的时候 谷歌浏览器接收语音.然后发送到谷歌后台,谷歌自己写的语音识别系统,然后再将数据返回,而现在的谷歌需要翻墙才能访问官网,所以此功能失效,有兴趣的去看另一个博客吧 .,终结....
相关文章推荐
- 关于如何利用suggest添加Solr中自动提示功能的简介
- 添加图片如何点击a标签, 弹出input file 上传文件对话框
- 如何利用jquery来给input添加或删除disabled属性全部方法总结
- 如何用input标签和jquery实现多图片的上传和回显功能
- android使用WebView加载html input标签调用手机相机相册 后添加扫码功能
- 利用nginx向现有网站添加登录验证功能(不添加修改现有网站代码)
- Android MTK N 平台上如何添加双卡铃声功能
- html5为输入框添加语音输入功能
- 图像处理控件ImageGear for .NET教程如何为应用程序 添加DICOM功能(2)
- html5为输入框添加语音输入功能
- 如何给网站添加CNZZ站长统计功能代码的常用办法
- 如何利用vb6使自己的软件加上卸载功能[图]
- Flex中如何利用width属性,将CheckBox的label标签截去。
- 详解 如何在 windows 7添加启动项 ,强大的计划任务功能 推荐
- iOS开发,如何利用Platinum库开发一个DLNA功能
- jsp中如何利用jspsmartupload实现文件上传下载功能
- 利用Javascript来修改file类型input标签的样式
- 《如何在WordPress上添加微信/支付宝打赏功能》
- 给某个标签添加click事件,通过jQuery写click方法的方式,如何实现
- 如何修改复选框的样式(其他input标签类推)