在網站上加個「語音輸入」搜尋吧！ (HTML5 Speech Input )

發表時間： 2012-06-10

最近逛到一個WordPress網站，發現它的搜尋框上竟然有一支麥克風！這，不是Google的語音輸入法嗎？只要對著麥克風講話就會將您所說的字句轉成文章，這實在是太貼心了。那，我該怎麼加入到自己的網站呢？事實上這是HTML5的一項技術(Speech Input)，目前這個功能只有在webkit核心瀏覽器才可以實現，例如Google Chrome上就可以使用這個語音搜尋。

一開始以為想要加入這個語音搜尋要使用很多語法，沒想到只要短短一個小語法就可以讓網站的搜尋框額外增加了語音輸入的功能，未來想要搜尋卻不想用手打字就可以這樣直接輸入了，是不是很方便呢？至於它的Text to Speech精準度，可以辨識中文和英文，只是不知道是麥克風？發音不標準？辨識能力太差？講不常見或者是太複雜的字句，辨識出來都怪怪的…

如何在Input欄位加入語音輸入的功能呢？您只需要加入「x-webkit-speech」這句語法到Input語法裡面就可以在瀏覽器上，看到您的input框右手邊多了一支小小的麥克風，點它就可以進行語音輸入的動作。當然這個特效目前只有在webkit核心瀏覽器有效果，如果您是其他非webkit瀏覽器，例如Firefox、IE等，可能就無法這樣輸入囉！

第1步 以香腸炒魷魚網站來看，右手邊的搜尋框是採用Google自訂搜尋，這也可以加入語音輸入嗎？當然可以囉！