HTML5-语音搜索框

语音搜索功能最近很火,各大网站、社区都没有放过这么一个人性化功能。而淘宝网的语音搜索也有了一阵子了,但似乎都没看到相关的博客或帖子在说这个如何实现,今天查了点资料,发现原来实现是如此简单,可能是因为太简单了,也就没有人讨论了吧。

HTML5-语音搜索框

<html>
<head>
 <script>
 function echoSpeakContent(){
  var objVal = document.getElementById('speakInput').value;
  alert(objVal);
 }
 </script>
 <title>html5-speaking</title>
</head>
 <body>
  <input x-webkit-speech x-webkit-grammar="bUIltin:search" lang="zh-CN" onwebkitspeechchange="echoSpeakContent();" id="speakInput"/>
 </body>
</html>

在Chrome中的效果如下

HTML5-语音搜索框

相关推荐