x-webkit-speech:为搜索框增加语音输入功能
作者:admin 日期:2012-09-01
w3c对语音输入有官方的说明:http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html
使用语音输入作用有:
1.提供除了键盘和鼠标的另一个输入方法,针对pc用户,当键盘不可用时也可以使用语音输入。
2.为手机用户提供更加方便的输入方法。
1.支持的浏览器
x-webkit-speech是webkit内核浏览器的私有属性(废话)。但现在只能在google的chrome 11以上才能使用。
实现过程大概是捕捉到语音后,数据发送到google的服务器进行语音识别,然后返回结果。所以没有足够强大大的研发能力和服务器资源,真没法支持这个服务。
作为普通话不标准经常被别人吐槽的人,使用语音搜索还是能十分准确地返回关键词,我顿时感动得一塌糊涂。
2.支持的标签
输入标签有input和textarea,实际上目前只有input支持。
3.检测浏览器是否支持
- if (document.createElement("input").webkitSpeech === undefined) {
- alert("Speech input is not supported in your browser.");
- }
4.直接使用
为input标签加上x-webkit-speech属性
- <input type="search" x-webkit-speech />
捕捉到语音输入后会直接将关键词填入到输入框里。
5.监听输入
若要监听输入变化以便做其他处理,使用onwebkitspeechchange属性添加处理函数。
- <input type="search" x-webkit-speech onwebkitspeechchange="onChange()"/>
- <script type="text/javascript">
- function onChange() {
- alert('changed');
- }
- </script>
6.注意:
如果原input中value不为空,输入会直接添加在原有文字后面。既然用webkit就要用placeholder了,不要再使用value为作输入提示了。
7.搜索前清空关键字:
- document.getElementById(‘test’).addEventListener(‘webkitspeechchange’, function(evt){
- console.log(evt);
- this.value = evt.results[0].utterance;
- }, false);
广告位