一、本不想寫此文
HTML5語音識(shí)別(現(xiàn)在一般用在搜索上),目前相關(guān)介紹還是挺多的。為何呢?因?yàn)楹芎?jiǎn)單!
下面是個(gè)普通文本框:
<input />
而稍稍多敲幾個(gè)字母,其就變成了支持HTML5語音API的語音識(shí)別文本框了。
<input x-webkit-speech />
我不喜歡嚼人家的爛根子,但是,就算鬧得再轟轟烈烈,那些種田的農(nóng)民伯伯也不知道“半13 連體褲”為何物。因此,一想到如此簡(jiǎn)單實(shí)用的裝逼功能還有不少人并不熟知,我這心里啊,就覺得不踏實(shí)。
你想想看哪?一說語音識(shí)別,哇靠,外行人(比方說你受盡臉色的產(chǎn)品經(jīng)理或是老板之類)一聽,立馬覺得這玩意牛逼哄哄。但是,你卻搞出來了,OK,這下可以盡情裝逼了:老板那,昨兒個(gè)我放棄和女友啵啵的好機(jī)會(huì),埋頭苦干,加班加點(diǎn)攻克語音識(shí)別這個(gè)史無前例的技術(shù)難關(guān),皇天不負(fù)有心人,終于讓我拿下啦!!
必然的,什么刮目相看,滔滔江水敬仰之情都來了。因此,HTML5語言識(shí)別就是每個(gè)前端人員都必備的裝B神器。
自從有了HTML5語音識(shí)別,老板再也不用擔(dān)心網(wǎng)站不高級(jí)了,so easy!
二、廬山小面目
紙上得來終覺淺,絕知此事要躬行。因此,有必要大家都來試試這裝B神器。如果您手頭上有活正在使用的是Chrome 11+瀏覽器,您可以狠狠地點(diǎn)擊這里:HTML5語音識(shí)別功能demo
看到?jīng)],文本框后面有個(gè)麥克風(fēng)模樣的東西,我們滿懷崇敬之情點(diǎn)擊之,突然眼前亮光一閃,(//zxx:不是亮瞎了金鈦狗眼),神器出現(xiàn)了:
此時(shí),對(duì)著音頻輸入設(shè)備(如耳麥)發(fā)出你那或妖嬈,或醇厚,或磁性的嗓音,啊~~
于是,神器顯威,檣櫓吹灰:
如果網(wǎng)速不行,或是google被墻了,或是你長時(shí)間不說話,或是說得是鳥語,神器可能就會(huì)不高興,然后這樣:
或者是這樣:
當(dāng)然,這里的語言識(shí)別還有其他參數(shù)或是方法。
比方說表示語言的:
<input x-webkit-speech lang="zh-CN" />
以及表示語法的(據(jù)說bUIltin:search可以過濾助詞,不過我沒測(cè)試過):
<input x-webkit-speech x-webkit-grammar="bUIltin:search" />
還有一個(gè)onwebkitspeechchange的方法,發(fā)生在語言識(shí)別成功,且文字輸入到文本框后觸發(fā)。
input.onwebkitspeechchange = function() { // ... };
三、神器的不足
人無完人,金無足赤。雖說HTML5語言是被是前端開發(fā)人員裝B神器,但是,并不是每次都裝得很perfect的。什么時(shí)候會(huì)掉水溝呢?我目前知道的有兩種情況:
1. iframe中定位問題
如果語音識(shí)別框在iframe中,則,神器定位似乎出現(xiàn)了偏差——相對(duì)于父級(jí)上下文容器定位了。//zxx:因?yàn)镠TML5不鳥iframe了?
您可以狠狠地點(diǎn)擊這里:iframe中語音識(shí)別框定位不準(zhǔn)demo
2. 語言內(nèi)容累加的問題
在正常情況下,點(diǎn)擊語音那個(gè)小圖標(biāo),輸入框中的文字還是處于選中狀態(tài)的,于是,新的語言信息會(huì)覆蓋之前的文字。但是,如果這種選中狀態(tài)丟失,就是出現(xiàn)語音識(shí)別內(nèi)容不斷累加的bug.
您可以狠狠地點(diǎn)擊這里:語音識(shí)別累加bug實(shí)例
例如,我們第一次說,”yu yin sou suo”,出現(xiàn)的是:
但是,要是你繼續(xù)說,”yu yin shi bie”,則出現(xiàn)的不是“語音識(shí)別”,而是“語音搜索語音識(shí)別”,兩者累加了,而不是覆蓋。這種情況再本文第一個(gè)demo中是不會(huì)出現(xiàn)的。
為何,這個(gè)demo做了個(gè)很小的事情,就是在文本框(搜索框)失去焦點(diǎn)的時(shí)候,值重新賦了下。——因?yàn)槲谋究蛑匦沦x值會(huì)去掉文字選中狀態(tài),然后……
還是不明白?靜下心,多花幾分鐘想想,會(huì)明白的。
四、要不,在說點(diǎn)什么
文章標(biāo)題有兩個(gè)字,“漸進(jìn)”,應(yīng)該都懂什么意思。別跟我整什么“IE6不支持”有的沒的的,不支持就不支持,又不是沒有基本生活保障。目前,就Chrome 11+瀏覽器上有該功能。
考慮到低級(jí)變高級(jí)的成本實(shí)在是低,而且基本上對(duì)之前的基本功能沒有任何影響。因此,我覺得所有網(wǎng)站所有的類似搜索的輸入框都讓他支持HTML5語言識(shí)別吧!想想這是你裝逼翻身的好機(jī)會(huì),就果斷去做了吧!!
原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明來自張?chǎng)涡?鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=2408