JS應(yīng)用程序中怎么執(zhí)行語(yǔ)音識(shí)別

這篇文章主要介紹了JS應(yīng)用程序中怎么執(zhí)行語(yǔ)音識(shí)別，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們提供的服務(wù)有：做網(wǎng)站、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、伍家崗ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的伍家崗網(wǎng)站制作公司

語(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ǔ)音合成。

語(yǔ)音識(shí)別接口

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() 開始語(yǔ)音識(shí)別，而 ognition.stop() 停止語(yǔ)音識(shí)別，它也可以中止（ recognition.abort）。

當(dāng)頁(yè)面正在訪問(wèn)您的麥克風(fēng)時(shí)，地址欄中將顯示一個(gè)麥克風(fēng)圖標(biāo)，以顯示該麥克風(fēng)已打開并且正在運(yùn)行。

JS應(yīng)用程序中怎么執(zhí)行語(yǔ)音識(shí)別

我們用句子對(duì)頁(yè)面說(shuō)。“hello comma I'm talking period.” onresult 在我們說(shuō)話時(shí)顯示所有臨時(shí)結(jié)果。

JS應(yīng)用程序中怎么執(zhí)行語(yǔ)音識(shí)別

這是此示例的HTML代碼：

<!DOCTYPE html>
<html>
  <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行開始語(yǔ)音識(shí)別，第12行停止語(yǔ)音識(shí)別。

在第12行，單擊該按鈕后，它可能仍會(huì)打印出一些消息。這是因?yàn)?Recognition.stop() 嘗試返回到目前為止捕獲的SpeechRecognitionResult。如果您希望它完全停止，請(qǐng)改用 ognition.abort()。

您會(huì)看到動(dòng)畫按鈕的代碼（第38-51行）比語(yǔ)音識(shí)別代碼長(zhǎng)。這是該示例的視頻剪輯：https://youtu.be/5V3bb5YOnj0

JS應(yīng)用程序中怎么執(zhí)行語(yǔ)音識(shí)別

以下是瀏覽器兼容性表：

JS應(yīng)用程序中怎么執(zhí)行語(yǔ)音識(shí)別

網(wǎng)絡(luò)語(yǔ)音識(shí)別依賴于瀏覽器自己的語(yǔ)音識(shí)別引擎。在Chrome中，此引擎在云中執(zhí)行識(shí)別。因此，它僅可在線運(yùn)行。

語(yǔ)音識(shí)別庫(kù)

有一些開源語(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)研究人員和開發(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

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ù)或暫停）開始監(jiān)聽，例如 annyang.start({autoRestart：true，Continuous：false})。
annyang.abort：停止收聽（停止SpeechRecognition引擎或關(guān)閉麥克風(fēng)）。
annyang.pause：停止收聽（無(wú)需停止SpeechRecognition引擎或關(guān)閉麥克風(fēng)）。
annyang.resume：開始收聽時(shí)不帶任何選項(xiàng)。

這是此示例的HTML代碼：

<!DOCTYPE html>
<html>
  <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)麗絲致意。”如果您說(shuō)“嗨，愛(ài)麗絲和約翰”，它的回答是“您向愛(ài)麗絲和約翰打招呼。”

第33行是一個(gè)帶有命名變量的命令。一周的日期被捕獲為 day，在響應(yīng)中被呼出。

第36行是帶有可選單詞的命令。如果您說(shuō)“黃色”，則將其忽略。如果您提到任何一種原色，則會(huì)以“您說(shuō)的是原色名稱”作為響應(yīng)。

從第26行到第39行定義的所有命令都在第41行添加到annyang中。

... ...

結(jié)束

我們已經(jīng)了解了JavaScript應(yīng)用程序中的語(yǔ)音識(shí)別，Chrome對(duì)Web語(yǔ)音API提供了最好的支持。我們所有的示例都是在Chrome瀏覽器上實(shí)現(xiàn)和測(cè)試的。

在探索Web語(yǔ)音API時(shí)，這里有一些提示：如果您不想在日常生活中傾聽，請(qǐng)記住關(guān)閉語(yǔ)音識(shí)別應(yīng)用程序。

JavaScript是什么

JS是JavaScript的簡(jiǎn)稱，它是一種直譯式的腳本語(yǔ)言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果，讓網(wǎng)頁(yè)更加美觀。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JS應(yīng)用程序中怎么執(zhí)行語(yǔ)音識(shí)別”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)站欄目：JS應(yīng)用程序中怎么執(zhí)行語(yǔ)音識(shí)別
URL地址：http://chinadenli.net/article8/joicip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、域名注冊(cè)、企業(yè)網(wǎng)站制作、網(wǎng)站建設(shè)、云服務(wù)器、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

JS應(yīng)用程序中怎么執(zhí)行語(yǔ)音識(shí)別

語(yǔ)音識(shí)別接口

語(yǔ)音識(shí)別庫(kù)

1. Annyang

2. artyom.js

3. Mumble

4. julius.js

5.voice-commands.js

Annyang

結(jié)束

JavaScript是什么