最近逛到一個WordPress網站，發現它的搜尋框上竟然有一支麥克風！這，不是Google的語音輸入法嗎？只要對著麥克風講話就會將您所說的字句轉成文章，這實在是太貼心了。那，我該怎麼加入到自己的網站呢？事實上這是HTML5的一項技術(Speech Input)，目前這個功能只有在webkit核心瀏覽器才可以實現，例如Google Chrome上就可以使用這個語音搜尋。
一開始以為想要加入這個語音搜尋要使用很多語法，沒想到只要短短一個小語法就可以讓網站的搜尋框額外增加了語音輸入的功能，未來想要搜尋卻不想用手打字就可以這樣直接輸入了，是不是很方便呢？至於它的Text to Speech精準度，可以辨識中文和英文，只是不知道是麥克風？發音不標準？辨識能力太差？講不常見或者是太複雜的字句，辨識出來都怪怪的…
如何在Input欄位加入語音輸入的功能呢？您只需要加入「x-webkit-speech」這句語法到Input語法裡面就可以在瀏覽器上，看到您的input框右手邊多了一支小小的麥克風，點它就可以進行語音輸入的動作。當然這個特效目前只有在webkit核心瀏覽器有效果，如果您是其他非webkit瀏覽器，例如Firefox、IE等，可能就無法這樣輸入囉！
第1步 以香腸炒魷魚網站來看，右手邊的搜尋框是採用Google自訂搜尋，這也可以加入語音輸入嗎？當然可以囉！
第2步 開啟原始檔案，找到可以輸入搜尋文字的那個input，在最後面加入以下語法，儲存上傳即可。
語法：x-webkit-speech
第3步 接著你就會看到搜尋框框中多了一個麥克風。
第4步 點一下麥克風，然後就可以利用你的麥克風講話輸入文字囉！
相關文章
![[教學] 社區網路外網IP受限？Tailscale 免架設VPN，輕鬆突破限制實現內網穿透](https://i1.wp.com/sofree.cc/wp-content/uploads/2025/07/20250710125633_0_41a747.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學] 社區網路外網IP受限？Tailscale 免架設VPN，輕鬆突破限制實現內網穿透")
![[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告](https://i0.wp.com/sofree.cc/wp-content/uploads/2023/06/20230620130326_57.jpg?fit=768%2C403&quality=99&ssl=1 "[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告")
