本文給大家介紹如何使用html5為輸入框添加語(yǔ)音輸入功能,實(shí)現(xiàn)方法很簡(jiǎn)單,需要的朋友參考下本文
這里介紹的是大家以后要用到的html強(qiáng)大功能,可直接給輸入框增加語(yǔ)音功能,下面我們先來(lái)看看實(shí)現(xiàn)方法。
大家可以看到在輸入框右邊的麥克風(fēng)圖標(biāo),點(diǎn)擊麥克風(fēng)就能夠進(jìn)行語(yǔ)音識(shí)別了。
其實(shí)很簡(jiǎn)單,語(yǔ)音識(shí)別是html5的基本功能,它的用法是
<input type=”text” speech x-webkit-speech />
如果喜歡XHTML類似的語(yǔ)法,可以這樣表示
<input type=”text” x-webkit-speech=”x-webkit-speech” />
語(yǔ)音識(shí)別在十年前是讓人覺(jué)得不可思議的事情,即便是前些年,網(wǎng)頁(yè)上的語(yǔ)音識(shí)別也只能使用其他方式實(shí)現(xiàn),比如使用Flashplayer等等。不過(guò)現(xiàn)在,獲取語(yǔ)音只需要簡(jiǎn)單的給輸入框加入一個(gè)屬性標(biāo)簽,就能夠進(jìn)行識(shí)別了。
移動(dòng)設(shè)備如手機(jī)上的瀏覽器,只要支持html5,同樣也應(yīng)該支持語(yǔ)音識(shí)別。試試你的Android瀏覽這個(gè)網(wǎng)頁(yè)?
另外,如果想用javascript獲取語(yǔ)音識(shí)別這個(gè)事件的結(jié)束,可以使用onwebkitspeechchange
<input type=”text” speech x-webkit-speech onwebkitspeechchange=”alert(this.value)” />
【相關(guān)推薦】
1. Html5免費(fèi)視頻教程
2. H5制作虛擬鍵盤時(shí)出現(xiàn)輸入框遮擋的情況怎么辦?
3. HTML5實(shí)現(xiàn)微信播放全屏的方法詳解
4. 關(guān)于H5新標(biāo)簽的瀏覽器兼容問(wèn)題的詳解
5. 教你如何用H5無(wú)刷新改變當(dāng)前url的實(shí)例詳解