html5語音輸入功能speech屬性

日期：2013-11-22  來源：攀枝花惠康網絡公司

實現語音輸入也很是簡單：

以前語音輸入功能雖然沒用過，可是看上去很高級的樣子，有了智妙手機之后，在ios和android中的語音輸入，出格是iPhone的Siri，讓一切變得如斯簡單，嘎嘎。

當然我不是在這里要實現如斯強悍的功能，只是說說html5中的語音輸入功能speech屬性，巨匠先可以看看W3C文檔：http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html

<input id="q" name="q" accesskey="s" autofocus="true" autocomplete="off" x-webkit-speech  x-webkit-grammar="builtin:translate" />

簡單的來說，我們只要在input元素上加上x-webkit-speech屬性就可以了，當然你如不美觀用xhtml，那么尺度的寫法是：x-webkit-speech=”x-webkit-speech”；

<input  name="q"  x-webkit-speech />

其他屬性：

lang
設置說話種類：

x-webkit-grammar
語音識別語法，取值：

• translations―說一個詞，并把它翻譯
• definitions―說一個詞，而且獲得定音
• directions―說一個地址，要求行車路線
• dictation
• …

事務

onwebkitspeechchange

語音輸入事務，當發聲語音改變時觸發：

看上去很強年夜的樣子，不外不要歡快的太早，因為年夜部門的瀏覽器還沒有實現這些接口，今朝可以用的只有chrome（11版本以上）的私有屬性：x-webkit-speech。例如我們看看淘寶在chrome下的搜索框，如圖：

<form action="http://www.google.com/search" >
<input type="search" name="q" lang="zh-CN" x-webkit-speech x-webkit-grammar="builtin:search" onwebkitspeechchange="startSearch(event)"/>
</form>

<input lang="zh-CN" type="text" />

考試考試一下下面的語音搜索：http://www.css88.com/demo/speech/

嘎嘎。