淺析如何利用JavaScript進(jìn)行語(yǔ)音識(shí)別
一、基礎(chǔ)用法
var recognition = new webkitSpeechRecognition();
recognition.onresult = function(event) {
console.log(event)
}
recognition.start();
這里操作實(shí)際會(huì)讓用戶授權(quán)頁(yè)面開(kāi)啟麥克風(fēng),如果用戶允許的話,用戶可以開(kāi)始說(shuō)話了,如果你停說(shuō)話了,onresult注冊(cè)的時(shí)間 則會(huì)被觸發(fā),并會(huì)講捕獲的音頻返回成一個(gè)JavaScript對(duì)象。
二、響應(yīng)流
你需要等待用戶準(zhǔn)備好對(duì)話,并且知道對(duì)話結(jié)束;
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) {
console.log(event)
}
recognition.start();

這樣你可以在用戶開(kāi)始講話時(shí),提前渲染結(jié)果。
你可以自動(dòng)以識(shí)別的語(yǔ)言,默認(rèn)情況為所在地區(qū)語(yǔ)言。
三、x-webkit-speech
Webkit 內(nèi)核的瀏覽器支持語(yǔ)音輸入
<input type="text" x-webkit-speech />
它會(huì)識(shí)別音頻并進(jìn)行轉(zhuǎn)化為文字
四、安全性
http協(xié)議下瀏覽器每次都會(huì)提醒用戶去確認(rèn)語(yǔ)音操作,然而https的頁(yè)面,沒(méi)有這樣一個(gè)麻煩的操作。
JavaScript上下文,整個(gè)頁(yè)面,都能過(guò)訪問(wèn)到捕獲的音頻。
總結(jié)
JavaScript的語(yǔ)音識(shí)別總體還并未大范圍使用,而且受限于瀏覽器支持,因此只有少數(shù)需求或許能夠使用到吧。以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
再談javascript圖片預(yù)加載技術(shù)(詳細(xì)演示)
由于javascript無(wú)法獲取img文件頭數(shù)據(jù),必須等待其加載完畢后才能獲取真實(shí)的大小,所以lightbox類效果為了讓圖片居中顯示,導(dǎo)致其速度體驗(yàn)要比直接輸出的差很多。2011-03-03
echarts學(xué)習(xí)筆記之圖表自適應(yīng)問(wèn)題詳解
最近發(fā)現(xiàn)一個(gè)問(wèn)題,echarts圖初始化后不能自適應(yīng)瀏覽器的縮放,所以下面這篇文章就來(lái)給大家介紹了關(guān)于echarts圖表自適應(yīng)問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
微信小程序自定義菜單切換欄tabbar組件代碼實(shí)例
這篇文章主要介紹了微信小程序自定義菜單切換欄tabbar組件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
js判斷運(yùn)行jsp頁(yè)面的瀏覽器類型以及版本示例
做了一個(gè)判斷瀏覽器類型和版本號(hào)的業(yè)務(wù),記錄下相關(guān)的js代碼,個(gè)人感覺(jué)還不錯(cuò),需要的朋友可以參考下2013-10-10
JS實(shí)現(xiàn)很酷的EMAIL地址添加功能實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)很酷的EMAIL地址添加功能,實(shí)例分析了javascript操作text文本的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JS支付頁(yè)面倒計(jì)時(shí)的實(shí)現(xiàn)示例
本文主要介紹了JS支付頁(yè)面倒計(jì)時(shí)的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
javascript如何用遞歸寫(xiě)一個(gè)簡(jiǎn)單的樹(shù)形結(jié)構(gòu)示例
本篇文章主要介紹了javascript如何用遞歸寫(xiě)一個(gè)簡(jiǎn)單的樹(shù)形結(jié)構(gòu)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
uniapp使用webview嵌入vue頁(yè)面及通信實(shí)現(xiàn)方式
項(xiàng)目中有需要嵌入其他H5的頁(yè)面的業(yè)務(wù)需求,這篇文章主要給大家介紹了關(guān)于uniapp使用webview嵌入vue頁(yè)面及通信實(shí)現(xiàn)方式的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
JS的encodeURI和java的URLDecoder.decode使用介紹
如果不想在url中看到有明文可以使用js的encodeURI的URLDecoder.decode一起使用一起來(lái)把url加密下,下面有個(gè)不錯(cuò)的示例,大家不妨參考下2014-05-05

