使用Chrome瀏覽器的同學應該會經常看到一些網站的搜索框右邊有一個麥克風的標志，點擊圖標后即可連接麥克風進行語音識別搜索，那么這是如何實現的呢？

淘寶網上的語音搜索功能

其實非常簡單，這是html5下一個新的屬性，通過調用google的語音服務api，用于支持網頁內的語音識別輸入功能。

只需要在輸入框的input上添加一個x-webkit-speech 屬性就可以了。

如本博客的搜索框：

<input type="text"  name="edtSearch" x-webkit-speech id="edtSearch" value="Search...." onfocus="if (this.value == 'Search....') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search....';}" />

另外它還可以添加以下屬性：

語言種類： lang="zh-CN"

發聲改變時觸發相關語音識別：onwebkitspeechchange="foo()"

讓語音輸入的內容更加精確盡量接近搜索內容：x-webkit-grammar="bUIltin:search"

通過平時的使用感覺如果發音清晰的話，識別率還算不錯。這是google應用于Chrome瀏覽器上的一項實驗性功能，以上屬性同樣也對webkit內核瀏覽器生效。

相關W3C標準參考文檔：http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html