譯|在Javascript應用程序中執行語音識別

時間  2021-05-21
標籤 javascript html java git github web ajax npm 編程 瀏覽器 欄目 JavaScript 简体版
原文   原文鏈接

語音識別是計算機科學和計算語言學的一個跨學科子領域。它能夠識別口語並將其翻譯成文本，它也被稱爲自動語音識別（ASR），計算機語音識別或語音轉文本（STT）。javascript

機器學習（ML）是人工智能（AI）的一種應用，它使系統可以自動學習並從經驗中進行改進，而無需進行明確的編程。機器學習在本世紀提供了大多數語音識別方面的突破。現在，語音識別技術無處不在，例如Apple Siri，Amazon Echo和Google Nest。html

語音識別以及語音響應（也稱爲語音合成或文本到語音（TTS））由Web speech API提供支持。java

在本文中，咱們重點介紹JavaScript應用程序中的語音識別。另外一篇文章介紹了語音合成。git

語音識別接口

SpeechRecognition 是識別服務的控制器接口，在Chrome中稱爲 webkitSpeechRecognition。SpeechRecognition 處理從識別服務發送的 SpeechRecognitionEvent。SpeechRecognitionEvent.results 返回一個SpeechRecognitionResultList 對象，該對象表示當前會話的全部語音識別結果。github

可使用如下幾行代碼來初始化 SpeechRecognition：web

// 建立一個SpeechRecognition對象
const recognition = new webkitSpeechRecognition();

// 配置設置以使每次識別都返回連續結果
recognition.continuous = true;

// 配置應返回臨時結果的設置
recognition.interimResults = true;

// 正確識別單詞或短語時的事件處理程序
recognition.onresult = function (event) {
  console.log(event.results);
};

ognition.start() 開始語音識別，而 ognition.stop() 中止語音識別，它也能夠停止（ recognition.abort）。ajax

當頁面正在訪問您的麥克風時，地址欄中將顯示一個麥克風圖標，以顯示該麥克風已打開而且正在運行。npm

咱們用句子對頁面說。「hello comma I'm talking period.」 onresult 在咱們說話時顯示全部臨時結果。編程

這是此示例的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行建立了 SpeechRecognition 對象，第26和27行配置了 SpeechRecognition 對象。

當一個單詞或短語被正確識別時，第28-34行設置一個事件處理程序。

第19行開始語音識別，第12行中止語音識別。

在第12行，單擊該按鈕後，它可能仍會打印出一些消息。這是由於 Recognition.stop() 嘗試返回到目前爲止捕獲的SpeechRecognitionResult。若是您但願它徹底中止，請改用 ognition.abort()。

您會看到動畫按鈕的代碼（第38-51行）比語音識別代碼長。這是該示例的視頻剪輯：https://youtu.be/5V3bb5YOnj0

如下是瀏覽器兼容性表：

網絡語音識別依賴於瀏覽器本身的語音識別引擎。在Chrome中，此引擎在雲中執行識別。所以，它僅可在線運行。

語音識別庫

有一些開源語音識別庫，如下是基於npm趨勢的這些庫的列表：

1. Annyang

Annyang是一個JavaScript語音識別庫，用於經過語音命令控制網站。它創建在SpeechRecognition Web API之上。在下一節中，咱們將舉例說明annyang的工做原理。

2. artyom.js

artyom.js是一個JavaScript語音識別和語音合成庫。它創建在Web語音API的基礎上，除語音命令外，它還提供語音響應。

3. Mumble

Mumble是一個JavaScript語音識別庫，用於經過語音命令控制網站。它創建在SpeechRecognition Web API之上，這相似於annyang的工做方式。

4. julius.js

Julius是面向語音相關研究人員和開發人員的高性能，佔用空間小的大詞彙量連續語音識別（LVCSR）解碼器軟件。它能夠在從微型計算機到雲服務器的各類計算機和設備上執行實時解碼。Julis是使用C語言構建的，而julius.js是Julius自覺得是JavaScript的移植版。

5.voice-commands.js

voice-commands.js是一個JavaScript語音識別庫，用於經過語音命令控制網站。它創建在SpeechRecognition Web API之上，這相似於annyang的工做方式。

Annyang

Annyang初始化一個 SpeechRecognition 對象，該對象定義以下：

var SpeechRecognition = root.SpeechRecognition ||                                     
                        root.webkitSpeechRecognition ||                          
                        root.mozSpeechRecognition ||                          
                        root.msSpeechRecognition ||                          
                        root.oSpeechRecognition;

有一些API能夠啓動或中止annyang：

  • annyang.start：使用選項（自動重啓，連續或暫停）開始監聽，例如 annyang.start({autoRestart：true，Continuous：false})。
  • annyang.abort：中止收聽（中止SpeechRecognition引擎或關閉麥克風）。
  • annyang.pause：中止收聽（無需中止SpeechRecognition引擎或關閉麥克風）。
  • annyang.resume：開始收聽時不帶任何選項。

這是此示例的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行啓動annyang，第13行暫停annyang。

Annyang提供語音命令來控制網頁（第26-42行）。

第27行是一個簡單的命令。若是用戶打招呼，頁面將回復「您說‘你好’。」

第30行是帶有 splats 的命令，該命令會貪婪地捕獲命令末尾的多詞文本。若是您說「hi,愛麗絲e」，它的回答是「您向愛麗絲致意。」若是您說「嗨，愛麗絲和約翰」，它的回答是「您向愛麗絲和約翰打招呼。」

第33行是一個帶有命名變量的命令。一週的日期被捕獲爲 day，在響應中被呼出。

第36行是帶有可選單詞的命令。若是您說「黃色」，則將其忽略。若是您提到任何一種原色，則會以「您說的是原色名稱」做爲響應。

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

... ...

結束

咱們已經瞭解了JavaScript應用程序中的語音識別，Chrome對Web語音API提供了最好的支持。咱們全部的示例都是在Chrome瀏覽器上實現和測試的。

在探索Web語音API時，這裏有一些提示：若是您不想在平常生活中傾聽，請記住關閉語音識別應用程序。

本文首次發表於公衆號

本文首次發表於公衆號

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程