用Web Speech API 和 Node.js 建立一個簡單的 AI 聊天機器人
首先，我們要用 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')); // htmlapp.use(express.static(__dirname + '/public')); // js, css, imagesconst server = app.listen(5000);app.get('/', (req, res) => { res.sendFile('index.html');});下一步，我們將使用 Web Speech API 整合前端程式碼。
用 SpeechRecognition 介面接收語音
Web Speech API 有一個主要的控制介面，叫 SpeechRecognition，從麥克風接收使用者的語音並加以識別。
建立使用者介面
這個應用的 UI 很簡單：一個開啟語音識別的按鈕。開啟 index.html，將前端的 ja vascript 檔案（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 檔案。
用 ja vascript 捕捉聲音
在 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
建立一個賬戶後，你就建立了一個“代理”。參考文件指南的第一步。
用 API.AI 介面自定義你的 small-talk 代理。
使用 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 機器人吧！