一、本不想寫(xiě)此文

HTML5語(yǔ)音識(shí)別（現(xiàn)在一般用在搜索上），目前相關(guān)介紹還是挺多的。為何呢？因?yàn)楹芎?jiǎn)單！

下面是個(gè)普通文本框：

<input />

而稍稍多敲幾個(gè)字母，其就變成了支持HTML5語(yǔ)音API的語(yǔ)音識(shí)別文本框了。

<input x-webkit-speech />

我不喜歡嚼人家的爛根子，但是，就算鬧得再轟轟烈烈，那些種田的農(nóng)民伯伯也不知道“半13 連體褲”為何物。因此，一想到如此簡(jiǎn)單實(shí)用的裝逼功能還有不少人并不熟知，我這心里啊，就覺(jué)得不踏實(shí)。

你想想看哪？一說(shuō)語(yǔ)音識(shí)別，哇靠，外行人(比方說(shuō)你受盡臉色的產(chǎn)品經(jīng)理或是老板之類(lèi))一聽(tīng)，立馬覺(jué)得這玩意牛逼哄哄。但是，你卻搞出來(lái)了，OK，這下可以盡情裝逼了：老板那，昨兒個(gè)我放棄和女友啵啵的好機(jī)會(huì)，埋頭苦干，加班加點(diǎn)攻克語(yǔ)音識(shí)別這個(gè)史無(wú)前例的技術(shù)難關(guān)，皇天不負(fù)有心人，終于讓我拿下啦！！

必然的，什么刮目相看，滔滔江水敬仰之情都來(lái)了。因此，HTML5語(yǔ)言識(shí)別就是每個(gè)前端人員都必備的裝B神器。

自從有了HTML5語(yǔ)音識(shí)別，老板再也不用擔(dān)心網(wǎng)站不高級(jí)了，so easy!

二、廬山小面目

紙上得來(lái)終覺(jué)淺，絕知此事要躬行。因此，有必要大家都來(lái)試試這裝B神器。如果您手頭上有活正在使用的是Chrome 11+瀏覽器，您可以狠狠地點(diǎn)擊這里：HTML5語(yǔ)音識(shí)別功能demo

看到?jīng)]，文本框后面有個(gè)麥克風(fēng)模樣的東西，我們滿懷崇敬之情點(diǎn)擊之，突然眼前亮光一閃，(//zxx:不是亮瞎了金鈦狗眼)，神器出現(xiàn)了：

此時(shí)，對(duì)著音頻輸入設(shè)備（如耳麥）發(fā)出你那或妖嬈，或醇厚，或磁性的嗓音，啊~~

于是，神器顯威，檣櫓吹灰：

如果網(wǎng)速不行，或是google被墻了，或是你長(zhǎng)時(shí)間不說(shuō)話，或是說(shuō)得是鳥(niǎo)語(yǔ)，神器可能就會(huì)不高興，然后這樣：

或者是這樣：

當(dāng)然，這里的語(yǔ)言識(shí)別還有其他參數(shù)或是方法。
比方說(shuō)表示語(yǔ)言的：

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

以及表示語(yǔ)法的（據(jù)說(shuō)bUIltin:search可以過(guò)濾助詞，不過(guò)我沒(méi)測(cè)試過(guò)）：

<input x-webkit-speech x-webkit-grammar="bUIltin:search" />

還有一個(gè)onwebkitspeechchange的方法，發(fā)生在語(yǔ)言識(shí)別成功，且文字輸入到文本框后觸發(fā)。

input.onwebkitspeechchange = function() {
    // ...
};

三、神器的不足

人無(wú)完人，金無(wú)足赤。雖說(shuō)HTML5語(yǔ)言是被是前端開(kāi)發(fā)人員裝B神器，但是，并不是每次都裝得很perfect的。什么時(shí)候會(huì)掉水溝呢？我目前知道的有兩種情況：
1. iframe中定位問(wèn)題
如果語(yǔ)音識(shí)別框在iframe中，則，神器定位似乎出現(xiàn)了偏差——相對(duì)于父級(jí)上下文容器定位了。//zxx:因?yàn)镠TML5不鳥(niǎo)iframe了？

您可以狠狠地點(diǎn)擊這里：iframe中語(yǔ)音識(shí)別框定位不準(zhǔn)demo

2. 語(yǔ)言內(nèi)容累加的問(wèn)題
在正常情況下，點(diǎn)擊語(yǔ)音那個(gè)小圖標(biāo)，輸入框中的文字還是處于選中狀態(tài)的，于是，新的語(yǔ)言信息會(huì)覆蓋之前的文字。但是，如果這種選中狀態(tài)丟失，就是出現(xiàn)語(yǔ)音識(shí)別內(nèi)容不斷累加的bug.

您可以狠狠地點(diǎn)擊這里：語(yǔ)音識(shí)別累加bug實(shí)例

例如，我們第一次說(shuō)，”yu yin sou suo”，出現(xiàn)的是：

但是，要是你繼續(xù)說(shuō)，”yu yin shi bie”，則出現(xiàn)的不是“語(yǔ)音識(shí)別”，而是“語(yǔ)音搜索語(yǔ)音識(shí)別”，兩者累加了，而不是覆蓋。這種情況再本文第一個(gè)demo中是不會(huì)出現(xiàn)的。

為何，這個(gè)demo做了個(gè)很小的事情，就是在文本框（搜索框）失去焦點(diǎn)的時(shí)候，值重新賦了下。——因?yàn)槲谋究蛑匦沦x值會(huì)去掉文字選中狀態(tài)，然后……

還是不明白？靜下心，多花幾分鐘想想，會(huì)明白的。

四、要不，在說(shuō)點(diǎn)什么

文章標(biāo)題有兩個(gè)字，“漸進(jìn)”，應(yīng)該都懂什么意思。別跟我整什么“IE6不支持”有的沒(méi)的的，不支持就不支持，又不是沒(méi)有基本生活保障。目前，就Chrome 11+瀏覽器上有該功能。

考慮到低級(jí)變高級(jí)的成本實(shí)在是低，而且基本上對(duì)之前的基本功能沒(méi)有任何影響。因此，我覺(jué)得所有網(wǎng)站所有的類(lèi)似搜索的輸入框都讓他支持HTML5語(yǔ)言識(shí)別吧！想想這是你裝逼翻身的好機(jī)會(huì)，就果斷去做了吧！！

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2408