竹磬网-邵珠庆の日记 生命只有一次，你可以用它来做些更多伟大的事情–Make the world a little better and easier


81月/130

如何实现网页输入框可进行语音输入

发布在 邵珠庆

 

语音输入也有了好一阵子了，但似乎还没看到相关的关于html网页上如何实现语音输入的文章，今天无聊查了点资料，发现原来实现是这么简单，可能是因为大家都着觉得太简单了，所以就没有人讨论了吧。

其实要实现网页中的语音输入只需一个代码便可实现：x-webkit-speech

大家看到这个代码，会联想到了什么？对，这代码说明语音输入只支持webkit内核浏览器。

那么这个代码具体要放在网页哪里的呢？

<input type="text" class="text"  name="测试"  x-webkit-speech />

放在文本输入框内就行了，就这么简单，看：

当然这个代码还会附带一些参数，比如设置语音限制语言种类；

<input type="text"  name="测试"  x-webkit-speech lang="zh-CN"/>

还有设置语音输入语法的参数，这个就比较适用于搜索方面的了。加上这参数后，系统就会自动去掉“的”、“啦”这类无意义的字；

<input type="text"  name="测试"  x-webkit-speech x-webkit-grammar="bUIltin:search"/>

另外还有onwebkitspeechchange参数，顾名思义，就是语音发生变化时触发的事件，一般可以作为提交；

<input type="text" name="测试" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/>

这样说完以后就自动提交了，非常方便。

在测试过程中，发现中文英语的识别率还蛮高的。但在设计方面存在着一个小问题，就是网页页面是iframe形式时，点击麦克风后，“请开始说话”这浮动层就不跟随input输入框了；

这个语音输入功能相当有趣，可以使你的网页更有个性化，但实用性就不敢恭维了，主要是因为适用范围太小了，所以只能希望HTML5尽快统一并应用起来。 :smile:

标签: , , 没有评论
   

支持博主

了解慈善捐款计划

关于邵珠庆博客

文章标签

API GA Git Google Analytics HTML5 jquery JS Linux MySQL nginx PHP SaaS web 互联网 代码 使用 分析 创业 原理 命令 好东西 如何 工具 常用 开发 总结 技巧 技术 插件 数据 文件 方法 时间 架构 框架 汇总 百度 管理 系统 网站 网站分析 设计 详解 问题 阿里云

记事邵珠庆博客

1、Web前端网址导航
2、邵珠庆极客筛站
3、识别移动设备访问代码


最近文章

最近评论

博客日历

2024年4月
一 二 三 四 五 六 日
« 8月    
1234567
891011121314
15161718192021
22232425262728
2930  

目录分类

文章归档

博客功能