教你用 Web Speech API 和 Node.js 來建立一個簡單的 AI 聊天機器人

簡評：使用語音命令在今天變得非常普遍，許多手機使用者使用像 Siri 和 Cortana 這樣的語音助手，我們的臥室也被亞馬遜的 Echo 和 Google Home 這樣的裝置“入侵”了。這些系統都離不開語音識別軟體，現在，我們的瀏覽器也友好支援了 Web Speech API，可以讓使用者在 Web 應用中整合語音功能。

這篇文章將介紹如何使用 API 來在瀏覽器中建立人工智慧語音聊天介面。這個應用會識別使用者的聲音，並且用一個合成的聲音來回答使用者。因為 Web Speech API 還處在試驗階段，這個應用只在支援的瀏覽器上可用。這篇文章使用的語音識別和語音合成功能，目前僅在基於 Chromium 的瀏覽器上支援，包括 Chrome 25+ 和 Opera 27+，目前 Firefox，Edge 和 Safari 僅支援語音合成。

Chrome 上執行的 demo 影片連結，接下來我們就來完成這個 demo ！

要完成這個 Web 應用，我們需要完成下面三個主要的步驟：

1。 使用 Web Speech API 的

SpeechRecognition

介面來識別使用者的聲音；

2。 將使用者的訊息作為文字字串傳送到商業的自然語言處理 API；

3。 一旦 API。AI 返回了響應文字，使用

SpeechSynthesis

介面來合成語音。

這篇文章使用的完整原始碼在 GitHub 上。（先幫妹子贊一個）

開始你的 Node。js 應用

首先，我們要用 Node。js 搭建一個 Web 應用框架。建立你的應用目錄，就像這樣：

。

├── index。js

├── public

│ ├── css

│ │ └── style。css

│ └── js

│ └── script。js

└── views

└── index。html

然後，執行下面的命令來初始化你的 Node。js 應用：

$ npm init -f

-f

命令表示接受預設的配置（你也可以去掉，然後手動配置你的應用），這樣會生成一個

package。json

檔案，包含一些基本資訊。

現在，安裝下面的依賴庫：

$ npm install express socket。io apiai ——save

--save

命令將會在

package。json

中自動更新依賴。

我們將要使用 Express 庫，一個 Node。js 寫的 Web 應用服務框架，可以在本地執行伺服器。為了實現在瀏覽器和伺服器之間實時雙向交流，我們將會使用 Socket。IO。同時，我們將會安裝自然語音處理服務工具，API。AI用來構建一個 AI 聊天機器人。

Socket。IO 是一個在 Node。js 中輕鬆使用 WebSocket 的庫。透過在客戶端和服務端建立 socket 連線，只要 Web Speech API（語音訊息）或者 API。AI API （AI 訊息）返回了文字資料，我們的聊天資訊就能在瀏覽器和伺服器之間往返。

現在，讓我們建立

index。js

檔案，並例項化 Express 以及監聽伺服器：

const

express

=

require

（

‘express’

）；

const

app

=

express

（）；

app

。

use

（

express

。

static

（

__dirname

+

‘/views’

））；

// html

app

。

use

（

express

。

static

（

__dirname

+

‘/public’

））；

// js， css， images

const

server

=

app

。

listen

（

5000

）；

app

。

get

（

‘/’

，

（

req

，

res

）

=>

{

res

。

sendFile

（

‘index。html’

）；

}）；

下一步，我們將使用 Web Speech API 整合前端程式碼。

用 SpeechRecognition 介面接收語音

Web Speech API 有一個主要的控制介面，叫 SpeechRecognition，從麥克風接收使用者的語音並加以識別。

建立使用者介面

這個應用的 UI 很簡單：一個開啟語音識別的按鈕。開啟

index。html

，將前端的 JavaScript 檔案（

script。js

）和 Socket。IO 包含進去。

<

html

lang

=

“en”

>

<

head

>

…

head

>

<

body

>

…

<

script

src

=

“https：//cdnjs。cloudflare。com/ajax/libs/socket。io/2。0。1/socket。io。js”

>

script

>

<

script

src

=

“js/script。js”

>

script

>

body

>

html

>

然後，我們在 body 中新增一個按鈕：

<

button

>

Talk

button

>

為了讓我們的按鈕看起來像 demo 中的那樣，我們需要在原始碼中引用

style。css

檔案。

用 JavaScript 捕捉聲音

在

script。js

中，呼叫 SpeechRecognition 的例項，Web Speech API 的控制介面：

const

SpeechRecognition

=

window

。

SpeechRecognition

||

window

。

webkitSpeechRecognition

；

const

recognition

=

new

SpeechRecognition

（）；

我們同時使用了有字首和沒有字首的物件，因為 Chrome 目前支援 API 的字首屬性。

同時，我們使用了 ECMAScript6 語法，因為 ES6，

const

關鍵字和箭頭函式以及 Speech API 介面

SpeechRecognition

和

SpeechSynthesis

都在瀏覽器中支援。

你可以隨意地設定一些屬性變數來自定義語音識別：

recognition

。

lang

=

‘en-US’

；

recognition

。

interimResults

=

false

；

然後，拿到按鈕的 DOM 引用，監聽點選事件來初始化語音識別：

document

。

querySelector

（

‘button’

）。

addEventListener

（

‘click’

，

（）

=>

{

recognition

。

start

（）；

}）；

一旦開始語音識別，就能用 result 事件將剛剛說的話轉成文字：

recognition

。

addEventListener

（

‘result’

，

（

e

）

=>

{

let

last

=

e

。

results

。

length

-

1

；

let

text

=

e

。

results

［

last

］［

0

］。

transcript

；

console

。

log

（

‘Confidence： ’

+

e

。

results

［

0

］［

0

］。

confidence

）；

// We will use the Socket。IO here later…

}）；

這將返回

SpeechRecognitionResultList

物件，你可以在這個物件的陣列中得到文字結果。同時，你可以看到上面程式碼中返回的

confidence

轉錄。

現在，是時候使用 Socket。IO 來向服務端傳送文字了。

用 Socket。IO 實時互動

你可能會好奇為什麼我們不用簡單的 HTTP 或者 AJAX 來代替。你可以透過 POST 方法向服務端傳送資料，但是，透過 Socket。IO，我們使用 WebSocket 傳送資料，因為 socket 是雙向交流的最佳解決方案，尤其是當我們從服務端向瀏覽器推送事件時。透過持續的 socket 連線，我們不用重新載入瀏覽器或者頻繁地持續傳送 AJAX 請求。

在

script。js

中例項化

http：//

Socket。IO

：

const

socket

=

io

（）；

然後插入你監聽 SpeechRecognition 的 result 事件程式碼：

socket

。

emit

（

‘chat message’

，

text

）；

現在重新回到 Node。js 程式碼，接收這條文字，然後使用 AI 響應使用者。

從 AI 中得到答覆

許多平臺和服務都能夠讓你在應用中用語音-文字自然語言處理來整合 AI 系統，包括 IBM 的 Watson，微軟的 LUIS 和 臉書的 Wit。ai。為了快速構建對話介面，我們將使用 API。AI，因為它提供了免費的開發者賬戶，讓我們可以使它的 Web 介面和 Node。js 庫快速地建立一個小型對話系統。

設定

API。AI

建立一個賬戶後，你就建立了一個“代理”。參考文件指南的第一步。

接著，點選左邊選單的 “Small Talk”，然後開啟啟用服務選項。

用 API。AI 介面自定義你的 small-talk 代理。

點選選單中你的代理名字旁邊的齒輪圖示，回到 “基本設定” 頁面，拿到 API 金鑰。你將會在 Node。js SDK 中使用“客戶端訪問令牌”。

使用

API。AI

我們將使用 Node。js SDK 來將我們的 Node。js 應用連線到 API。AI。回到

index。js

，用你的訪問令牌初始化 API。AI：

const apiai = require（‘apiai’）（APIAI_TOKEN）；

如果你只想在本地執行，你可以在這裡硬編碼你的 API 金鑰。這裡有幾種方式來設定環境變數，但我通常使用

。env

檔案來宣告變數。在 GitHub 中的原始碼中，我用

。gitignore

隱藏了我的證書檔案。但是你可以參考 。env-test 檔案看看它是如何設定的。

現在我們要用服務端的 Socket。IO 來接收瀏覽器的資料。

一旦建立連線收到訊息，使用 API。AI 的介面來響應使用者：

io

。

on

（

‘connection’

，

function

（

socket

）

{

socket

。

on

（

‘chat message’

，

（

text

）

=>

{

// Get a reply from API。AI

let

apiaiReq

=

apiai

。

textRequest

（

text

，

{

sessionId

：

APIAI_SESSION_ID

}）；

apiaiReq

。

on

（

‘response’

，

（

response

）

=>

{

let

aiText

=

response

。

result

。

fulfillment

。

speech

；

socket

。

emit

（

‘bot reply’

，

aiText

）；

// Send the result back to the browser！

}）；

apiaiReq

。

on

（

‘error’

，

（

error

）

=>

{

console

。

log

（

error

）；

}）；

apiaiReq

。

end

（）；

}）；

}）；

當 API。AI 返回結果後，用 Socket。IO 的

socket。emit（）

方法傳送到客戶端。

用 SpeechSynthesis 介面讓 AI 發出聲音

回到

script。js

，用 Web Speech API 的

SpeechSynthesis

控制器介面建立一個合成聲音的函式。這個函式接收一個字串引數，讓瀏覽器讀出文字：

function

synthVoice

（

text

）

{

const

synth

=

window

。

speechSynthesis

；

const

utterance

=

new

SpeechSynthesisUtterance

（）；

utterance

。

text

=

text

；

synth

。

speak

（

utterance

）；

}

上面的程式碼首先建立了一個

window。speechSynthesis

這個 API 接入點，你可能會注意到這次是沒有字首屬性的，這個 API 比

SpeechRecognition

更廣泛地被支援，所有的瀏覽器都棄用了

SpeechSysthesis

的字首。

接著建立了一個 SpeechSynthesisUtterance（） ，然後設定要被合成聲音的文字。你可以設定其他的屬性，比如

voice

，來選擇瀏覽器和作業系統支援的聲音型別。最終呼叫 SpeechSynthesis。speak（） 來發出聲音。

現在再次用 Socket。IO 來獲得服務端響應，一旦訊息收到了，就呼叫上面的函式。

socket

。

on

（

‘bot reply’

，

function

（

replyText

）

{

synthVoice

（

replyText

）；

}）；

讓我們來試試我們的 AI 機器人吧！

參考文章：

“Web Speech API，” Mozilla Developer Network

“Web Speech API Specification，” W3C

“Web Speech API： Speech Synthesis” （Microsoft Edge documentation） Microsoft

Guide， Node。js

Documentation， npm

“Hello world example，” Express

“Get Started，” Socket。IO

還可以試試不同的自然語言處理工具：

API。AI， Google

Wit。ai， Facebook

LUIS， Microsoft

Watson， IBM

Lex， Amazon

原文連結：Building A Simple AI Chatbot With Web Speech API And Node。js

推薦閱讀：

JavaScript 陣列和物件就像書和報紙一樣

歡迎關注：知乎專欄「極光日報」，每天為 Makers 導讀三篇優質英文文章。