網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

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/

嘎嘎。

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图