HTML5為輸入框添加語音輸入功能的實(shí)現(xiàn)方法

這里介紹的是大家以后要用到的html強(qiáng)大功能,可直接給輸入框增加語音功能,下面我們先來看看實(shí)現(xiàn)方法。
大家可以看到在輸入框右邊的麥克風(fēng)圖標(biāo),點(diǎn)擊麥克風(fēng)就能夠進(jìn)行語音識(shí)別了。
其實(shí)很簡單,語音識(shí)別是html5的基本功能,它的用法是
<input type=”text” speech x-webkit-speech />
如果喜歡XHTML類似的語法,可以這樣表示
<input type=”text” x-webkit-speech=”x-webkit-speech” />
語音識(shí)別在十年前是讓人覺得不可思議的事情,即便是前些年,網(wǎng)頁上的語音識(shí)別也只能使用其他方式實(shí)現(xiàn),比如使用Flashplayer等等。不過現(xiàn)在,獲取語音只需要簡單的給輸入框加入一個(gè)屬性標(biāo)簽,就能夠進(jìn)行識(shí)別了。
移動(dòng)設(shè)備如手機(jī)上的瀏覽器,只要支持html5,同樣也應(yīng)該支持語音識(shí)別。試試你的Android瀏覽這個(gè)網(wǎng)頁?
另外,如果想用javascript獲取語音識(shí)別這個(gè)事件的結(jié)束,可以使用onwebkitspeechchange
<input type=”text” speech x-webkit-speech onwebkitspeechchange=”alert(this.value)” />
以上所述是小編給大家介紹的HTML5為輸入框添加語音輸入功能的實(shí)現(xiàn)方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
- HTML5搜索輸入框下拉列表代碼是一款在搜索框里面輸入問題下拉顯示更多信息。需要的朋友可以來腳本之家下載2020-04-22
html5實(shí)現(xiàn)輸入框字?jǐn)?shù)限制提示抖動(dòng)效果
html5實(shí)現(xiàn)輸入框字?jǐn)?shù)限制提示抖動(dòng)效果,效果圖為藍(lán)色背景,輸入文字時(shí)并伴有橫條加載效果,當(dāng)超過限制字符時(shí),輸入框抖動(dòng)效果代碼。本段代碼可以在各個(gè)網(wǎng)頁使用,有需要的2018-03-01Html5新標(biāo)簽datalist實(shí)現(xiàn)輸入框與后臺(tái)數(shù)據(jù)庫數(shù)據(jù)的動(dòng)態(tài)匹配
HTML5新增的標(biāo)簽datalist實(shí)現(xiàn)輸入中文/拼音首字母時(shí),自動(dòng)進(jìn)入數(shù)據(jù)庫模糊查詢,并返回相應(yīng)的結(jié)果,生成datalist,由于在輸入框中的輸入內(nèi)容發(fā)生變化時(shí),datalist會(huì)自動(dòng)觸發(fā)2017-05-18- 本文主要介紹了HTML5 虛擬鍵盤出現(xiàn)擋住輸入框的解決辦法。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-14
- 這篇文章主要介紹了HTML5輸入框下拉菜單功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-09-08