溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)如何在Javascript應(yīng)用程序中執(zhí)行語(yǔ)音識(shí)別，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
語(yǔ)音識(shí)別是計(jì)算機(jī)科學(xué)和計(jì)算語(yǔ)言學(xué)的一個(gè)跨學(xué)科子領(lǐng)域。它可以識(shí)別口語(yǔ)并將其翻譯成文本，它也被稱為自動(dòng)語(yǔ)音識(shí)別（ASR），計(jì)算機(jī)語(yǔ)音識(shí)別或語(yǔ)音轉(zhuǎn)文本（STT）。
機(jī)器學(xué)習(xí)（ML）是人工智能（AI）的一種應(yīng)用，它使系統(tǒng)能夠自動(dòng)學(xué)習(xí)并從經(jīng)驗(yàn)中進(jìn)行改進(jìn)，而無(wú)需進(jìn)行明確的編程。機(jī)器學(xué)習(xí)在本世紀(jì)提供了大多數(shù)語(yǔ)音識(shí)別方面的突破。如今，語(yǔ)音識(shí)別技術(shù)無(wú)處不在，例如Apple Siri，Amazon Echo和Google Nest。
語(yǔ)音識(shí)別以及語(yǔ)音響應(yīng)（也稱為語(yǔ)音合成或文本到語(yǔ)音（TTS））由Web speech API提供支持。
在本文中，我們重點(diǎn)介紹JavaScript應(yīng)用程序中的語(yǔ)音識(shí)別。另一篇文章介紹了語(yǔ)音合成。
SpeechRecognition 是識(shí)別服務(wù)的控制器接口，在Chrome中稱為 webkitSpeechRecognition。SpeechRecognition 處理從識(shí)別服務(wù)發(fā)送的 SpeechRecognitionEvent。SpeechRecognitionEvent.results 返回一個(gè)SpeechRecognitionResultList 對(duì)象，該對(duì)象表示當(dāng)前會(huì)話的所有語(yǔ)音識(shí)別結(jié)果。
可以使用以下幾行代碼來(lái)初始化 SpeechRecognition：
// 創(chuàng)建一個(gè)SpeechRecognition對(duì)象 const recognition = new webkitSpeechRecognition(); // 配置設(shè)置以使每次識(shí)別都返回連續(xù)結(jié)果 recognition.continuous = true; // 配置應(yīng)返回臨時(shí)結(jié)果的設(shè)置 recognition.interimResults = true; // 正確識(shí)別單詞或短語(yǔ)時(shí)的事件處理程序 recognition.onresult = function (event) { console.log(event.results); };ognition.start() 開(kāi)始語(yǔ)音識(shí)別，而 ognition.stop() 停止語(yǔ)音識(shí)別，它也可以中止（ recognition.abort）。
當(dāng)頁(yè)面正在訪問(wèn)您的麥克風(fēng)時(shí)，地址欄中將顯示一個(gè)麥克風(fēng)圖標(biāo)，以顯示該麥克風(fēng)已打開(kāi)并且正在運(yùn)行。
我們用句子對(duì)頁(yè)面說(shuō)?！癶ello comma I'm talking period.” onresult 在我們說(shuō)話時(shí)顯示所有臨時(shí)結(jié)果。
這是此示例的HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Speech Recognition</title> <script> window.onload = () => { const button = document.getElementById('button'); button.addEventListener('click', () => { if (button.style['animation-name'] === 'flash') { recognition.stop(); button.style['animation-name'] = 'none'; button.innerText = 'Press to Start'; content.innerText = ''; } else { button.style['animation-name'] = 'flash'; button.innerText = 'Press to Stop'; recognition.start(); } }); const content = document.getElementById('content'); const recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.onresult = function (event) { let result = ''; for (let i = event.resultIndex; i < event.results.length; i++) { result += event.results[i][0].transcript; } content.innerText = result; }; }; </script> <style> button { background: yellow; animation-name: none; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes flash { 0% { background: red; } 50% { background: green; } } </style> </head> <body> <button id="button">Press to Start</button> <div id="content"></div> </body> </html>第25行創(chuàng)建了 SpeechRecognition 對(duì)象，第26和27行配置了 SpeechRecognition 對(duì)象。
當(dāng)一個(gè)單詞或短語(yǔ)被正確識(shí)別時(shí)，第28-34行設(shè)置一個(gè)事件處理程序。
第19行開(kāi)始語(yǔ)音識(shí)別，第12行停止語(yǔ)音識(shí)別。
在第12行，單擊該按鈕后，它可能仍會(huì)打印出一些消息。這是因?yàn)?Recognition.stop() 嘗試返回到目前為止捕獲的SpeechRecognitionResult。如果您希望它完全停止，請(qǐng)改用 ognition.abort()。
您會(huì)看到動(dòng)畫(huà)按鈕的代碼（第38-51行）比語(yǔ)音識(shí)別代碼長(zhǎng)。這是該示例的視頻剪輯：https://youtu.be/5V3bb5YOnj0
以下是瀏覽器兼容性表：
網(wǎng)絡(luò)語(yǔ)音識(shí)別依賴于瀏覽器自己的語(yǔ)音識(shí)別引擎。在Chrome中，此引擎在云中執(zhí)行識(shí)別。因此，它僅可在線運(yùn)行。
有一些開(kāi)源語(yǔ)音識(shí)別庫(kù)，以下是基于npm趨勢(shì)的這些庫(kù)的列表：
1. Annyang
Annyang是一個(gè)JavaScript語(yǔ)音識(shí)別庫(kù)，用于通過(guò)語(yǔ)音命令控制網(wǎng)站。它建立在SpeechRecognition Web API之上。在下一節(jié)中，我們將舉例說(shuō)明annyang的工作原理。
2. artyom.js
artyom.js是一個(gè)JavaScript語(yǔ)音識(shí)別和語(yǔ)音合成庫(kù)。它建立在Web語(yǔ)音API的基礎(chǔ)上，除語(yǔ)音命令外，它還提供語(yǔ)音響應(yīng)。
3. Mumble
Mumble是一個(gè)JavaScript語(yǔ)音識(shí)別庫(kù)，用于通過(guò)語(yǔ)音命令控制網(wǎng)站。它建立在SpeechRecognition Web API之上，這類似于annyang的工作方式。
4. julius.js
Julius是面向語(yǔ)音相關(guān)研究人員和開(kāi)發(fā)人員的高性能，占用空間小的大詞匯量連續(xù)語(yǔ)音識(shí)別（LVCSR）解碼器軟件。它可以在從微型計(jì)算機(jī)到云服務(wù)器的各種計(jì)算機(jī)和設(shè)備上執(zhí)行實(shí)時(shí)解碼。Julis是使用C語(yǔ)言構(gòu)建的，而julius.js是Julius自以為是JavaScript的移植版。
5.voice-commands.js
voice-commands.js是一個(gè)JavaScript語(yǔ)音識(shí)別庫(kù)，用于通過(guò)語(yǔ)音命令控制網(wǎng)站。它建立在SpeechRecognition Web API之上，這類似于annyang的工作方式。
Annyang初始化一個(gè) SpeechRecognition 對(duì)象，該對(duì)象定義如下：
var SpeechRecognition = root.SpeechRecognition || root.webkitSpeechRecognition || root.mozSpeechRecognition || root.msSpeechRecognition || root.oSpeechRecognition;
有一些API可以啟動(dòng)或停止annyang：
annyang.start：使用選項(xiàng)（自動(dòng)重啟，連續(xù)或暫停）開(kāi)始監(jiān)聽(tīng)，例如 annyang.start({autoRestart：true，Continuous：false})。
annyang.abort：停止收聽(tīng)（停止SpeechRecognition引擎或關(guān)閉麥克風(fēng)）。
annyang.pause：停止收聽(tīng)（無(wú)需停止SpeechRecognition引擎或關(guān)閉麥克風(fēng)）。
annyang.resume：開(kāi)始收聽(tīng)時(shí)不帶任何選項(xiàng)。
這是此示例的HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Annyang</title> <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script> <script> window.onload = () => { const button = document.getElementById('button'); button.addEventListener('click', () => { if (button.style['animation-name'] === 'flash') { annyang.pause(); button.style['animation-name'] = 'none'; button.innerText = 'Press to Start'; content.innerText = ''; } else { button.style['animation-name'] = 'flash'; button.innerText = 'Press to Stop'; annyang.start(); } }); const content = document.getElementById('content'); const commands = { hello: () => { content.innerText = 'You said hello.'; }, 'hi *splats': (name) => { content.innerText = `You greeted to ${name}.`; }, 'Today is :day': (day) => { content.innerText = `You said ${day}.`; }, '(red) (green) (blue)': () => { content.innerText = 'You said a primary color name.'; }, }; annyang.addCommands(commands); }; </script> <style> button { background: yellow; animation-name: none; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes flash { 0% { background: red; } 50% { background: green; } } </style> </head> <body> <button id="button">Press to Start</button> <div id="content"></div> </body> </html>
第7行添加了annyang源代碼。
第20行啟動(dòng)annyang，第13行暫停annyang。
Annyang提供語(yǔ)音命令來(lái)控制網(wǎng)頁(yè)（第26-42行）。
第27行是一個(gè)簡(jiǎn)單的命令。如果用戶打招呼，頁(yè)面將回復(fù)“您說(shuō)‘你好’?！?/p>
第30行是帶有 splats 的命令，該命令會(huì)貪婪地捕獲命令末尾的多詞文本。如果您說(shuō)“hi,愛(ài)麗絲e”，它的回答是“您向愛(ài)麗絲致意?！比绻f(shuō)“嗨，愛(ài)麗絲和約翰”，它的回答是“您向愛(ài)麗絲和約翰打招呼?！?/p>
第33行是一個(gè)帶有命名變量的命令。一周的日期被捕獲為 day，在響應(yīng)中被呼出。
第36行是帶有可選單詞的命令。如果您說(shuō)“黃色”，則將其忽略。如果您提到任何一種原色，則會(huì)以“您說(shuō)的是原色名稱”作為響應(yīng)。
從第26行到第39行定義的所有命令都在第41行添加到annyang中。
我們已經(jīng)了解了JavaScript應(yīng)用程序中的語(yǔ)音識(shí)別，Chrome對(duì)Web語(yǔ)音API提供了最好的支持。我們所有的示例都是在Chrome瀏覽器上實(shí)現(xiàn)和測(cè)試的。
在探索Web語(yǔ)音API時(shí)，這里有一些提示：如果您不想在日常生活中傾聽(tīng)，請(qǐng)記住關(guān)閉語(yǔ)音識(shí)別應(yīng)用程序。
關(guān)于如何在Javascript應(yīng)用程序中執(zhí)行語(yǔ)音識(shí)別就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼