1. 程式人生 > >如何利用input標籤新增語音錄入功能

如何利用input標籤新增語音錄入功能

相信大家現在在瀏覽網頁時都不難看到一些網站的文字框中帶有一個話筒(點選話筒可以語音輸入內容到文字框中),下面給大家介紹如何使自己的網站也支援語音輸入內容。

現在各大網站都在搜尋框中加入了語音輸入功能,不過目前只有Chrome 11及以上版本才支援。可以用chrome瀏覽器在這裡試試效果,點選話筒即可:

實現起來也非常簡單,為input新增名為 x-webkit-speech 的屬性就行了。

<input type="text" x-webkit-speech />
相關的屬性設定:
lang
設定語言種類:
<input type="text" x-webkit-speech lang="zh-CN" />
onwebkitspeechchange
語音輸入事件,當發聲語音改變時觸發:
<input type="text" x-webkit-speech onwebkitspeechchange="foo()" />

x-webkit-grammar
語音輸入語法,"builtin:search”值使得語音輸入的內容儘量靠近搜尋內容,去除多餘的字元,例如
<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />
還有個值:"builtin:translate”看到taobao在用,但目前還不清楚是什麼意義,有時間再仔細看看W3C的文件。

測試了下效果,語音識別率還不錯,但中英夾雜的時候就很悲劇了,而且該服務需要走google的伺服器所以有時響應速度很慢,另外在mac中遇到提示“麥克風無法使用”的情況,猜測可能存在一些硬體相容性問題。總的來說是趣味性大於實用性;比較期待能在手機瀏覽器上實現這個功能,可以做一些比較有趣的應用。

補充: 經過多個瀏覽器測試 均未顯示小話筒  查資料發現  其實所謂的語音識別 是我們在說話的時候 谷歌瀏覽器接收語音.然後傳送到谷歌後臺,谷歌自己寫的語音識別系統,然後再將資料返回,而現在的谷歌需要翻牆才能訪問官網,所以此功能失效,有興趣的去看另一個部落格吧 .,終結....

相關推薦

no