x-webkit-speech 語音輸入功能

最近發現各大網站陸續出現了搜索框邊上一個小話筒的語音輸入功能。網上找了下一定要webkit內核瀏覽器才能使用，不過win下的safari不知道為什么沒有顯示，回頭看下UA。

檢測瀏覽器是否支持

1  if (document.createElement("input").webkitSpeech === undefined) {
2     alert("Speech input is not supported in your browser.");
3 } 

 

 

下面說下怎么實現： 

顯示出來了吧，其實很簡單。

1 <input type="text" x-webkit-speech /> 

就一句，當然還有別的屬性可以添加:

lang

設置語言種類： 

1 <input type="text" x-webkit-speech lang="zh-CN" />

 

onwebkitspeechchange

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

1 <input type="text" x-webkit-speech onwebkitspeechchange="foo()" />

1  function foo(){
2   alert('changed');
3 } 

 

x-webkit-grammar

語音輸入語法，”builtin:search”值使得語音輸入的內容盡量靠近搜索內容，去除多余的字符，例如「的」 

1 <input type="text" x-webkit-speech x-webkit-grammar="builtin:search" /> 

PS : 如果原input中value不為空，輸入會直接添加在原有文字后面。既然用webkit就要用placeholder了，不要再使用value為作輸入提示了。