<p>最近发现各大网站陆续出现了搜索框边上一个小话筒的语音输入功能。网上找了下一定要webkit内核浏览器才能使用，不过win下的safari不知道为什么没有显示，回头看下UA。</p><p>检测浏览器是否支持</p><pre class="brush:html;toolbar:false">1if(document.createElement("input").webkitSpeech===undefined){
2alert("Speechinputisnotsupportedinyourbrowser.");
3}</pre><p><br/></p><p>下面说下怎么实现：</p><p>显示出来了吧，其实很简单。</p><pre class="brush:html;toolbar:false">1<inputtype="text"x-webkit-speech/></pre><p>就一句，当然还有别的属性可以添加:</p><p>lang</p><p>设置语言种类：</p><pre class="brush:html;toolbar:false">1<inputtype="text"x-webkit-speech/></pre><p><br/></p><p>onwebkitspeechchange</p><p>语音输入事件，当发声语音改变时触发：</p><pre class="brush:html;toolbar:false">1<inputtype="text"x-webkit-speechonwebkitspeechchange="foo()"/>
1functionfoo(){
2alert('changed');
3}</pre><p>x-webkit-grammar</p><p>语音输入语法，"builtin:search"值使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如「的」</p><pre class="brush:html;toolbar:false">1<inputtype="text"x-webkit-speechx-webkit-grammar="builtin:search"/></pre><p>PS : 如果原input中value不为空，输入会直接添加在原有文字后面。既然用webkit就要用placeholder了，不要再使用value为作输入提示了。</p>