竹磬网-邵珠庆の日记 生命只有一次,你可以用它来做些更多伟大的事情–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: