使用 JavaScript 將語音轉換為文本
在本教程中，我們將嘗試使用 Web Speech API。這是一個非常強大的瀏覽器界面，可讓您錄製人類語音並將其轉換為文本。我們還將用它來做相反的事情——以類似人的聲音讀出字符串。
讓我們直接跳進去！
應用程序
為了展示 API 的能力，我們將構建一個簡單的語音筆記應用程序。它做了 3 件事：
- 使用語音轉文本或傳統鍵盤輸入記筆記。
- 將筆記保存到 localStorage。
- 顯示所有筆記並提供通過語音合成收聽它們的選項。
我們不會使用任何花哨的依賴項，只使用舊的 jQuery 來簡化 DOM 操作，並使用 Shoelace 來實現 CSS 樣式。我們將直接通過 CDN 包含它們，不需要讓 NPM 參與這麼小的項目。
HTML 和 CSS 是相當標準的，所以我們將跳過它們，直接使用 JavaScript。要查看完整的源代碼，請轉到 下載 靠近頁面頂部的按鈕。
語音轉文字
Web Speech API 實際上被分成兩個完全獨立的接口。我們有 SpeechRecognition 用於理解人聲並將其轉換為文本（Speech -> Text）和 SpeechSynthesis 用於在計算機生成的語音中大聲朗讀字符串（Text -> Speech）。我們將從前者開始。
Speech Recognition API 對於免費的瀏覽器功能來說非常準確。它幾乎可以正確識別我所有的口語，並且知道哪些單詞組合在一起形成有意義的短語。它還允許您指定特殊字符，例如句號、問號和換行符。
我們需要做的第一件事是檢查用戶是否有權訪問 API 並顯示適當的錯誤消息。不幸的是，語音轉文本 API 僅在 Chrome 和 Firefox 中受支持（帶有標誌），所以很多人可能會看到該消息。
try {
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
var recognition = new SpeechRecognition();
}
catch(e) {
console.error(e);
$('.no-browser-support').show();
$('.app').hide();
}
recognition 變量將使我們能夠訪問所有 API 的方法和屬性。有多種可用選項，但我們只會設置 recognition.continuous 為真。這將使用戶能夠在單詞和短語之間有更長的停頓。
在我們可以使用語音識別之前，我們還必須設置幾個事件處理程序。他們中的大多數只是簡單地監聽識別狀態的變化：
recognition.onstart = function() {
instructions.text('Voice recognition activated. Try speaking into the microphone.');
}
recognition.onspeechend = function() {
instructions.text('You were quiet for a while so voice recognition turned itself off.');
}
recognition.onerror = function(event) {
if(event.error == 'no-speech') {
instructions.text('No speech was detected. Try again.');
};
}
但是，有一個特殊的 onresult 非常關鍵的事件。每次用戶快速連續說出一個或幾個單詞時都會執行它，讓我們可以訪問所說內容的文本轉錄。
當我們使用 onresult 捕獲某些東西時 handler 我們將它保存在一個全局變量中並顯示在一個 textarea 中：
recognition.onresult = function(event) {
// event is a SpeechRecognitionEvent object.
// It holds all the lines we have captured so far.
// We only need the current one.
var current = event.resultIndex;
// Get a transcript of what was said.
var transcript = event.results[current][0].transcript;
// Add the current transcript to the contents of our Note.
noteContent += transcript;
noteTextarea.val(noteContent);
} 上面的代碼略有簡化。 Android 設備上有一個非常奇怪的錯誤，它會導致所有內容重複兩次。目前還沒有官方解決方案，但我們設法解決了這個問題，沒有任何明顯的副作用。考慮到這個錯誤，代碼如下所示：
var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);
if(!mobileRepeatBug) {
noteContent += transcript;
noteTextarea.val(noteContent);
}
完成所有設置後，我們就可以開始使用瀏覽器的語音識別功能了。要啟動它，只需調用 start() 方法：
$('#start-record-btn').on('click', function(e) {
recognition.start();
}); 這將提示用戶授予權限。如果允許，設備的麥克風將被激活。
瀏覽器會聽一會兒，每一個識別的短語或單詞都會被轉錄。 API 將在幾秒鐘的靜音後或手動停止後自動停止偵聽。
$('#pause-record-btn').on('click', function(e) {
recognition.stop();
}); 這樣，我們應用程序的語音到文本部分就完成了！現在，讓我們反其道而行之！
文字轉語音
Speech Synthesys 實際上非常簡單。該 API 可通過 SpeechSynthesis 對象訪問，並且有幾種方法可用於播放、暫停和其他與音頻相關的內容。它還有幾個很酷的選項可以改變音高、速度，甚至是讀者的聲音。
我們的演示真正需要的是 speak() 方法。它需要一個參數，一個命名精美的 SpeechSynthesisUtterance 的實例 班級。
這是讀取字符串所需的全部代碼。
function readOutLoud(message) {
var speech = new SpeechSynthesisUtterance();
// Set the text and voice attributes.
speech.text = message;
speech.volume = 1;
speech.rate = 1;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
} 當這個函數被調用時，機器人的聲音會讀出給定的字符串，這是最好的人類印象。
結論
在語音助手比以往任何時候都更加流行的時代，這樣的 API 為您提供了構建能夠理解和使用人類語言的機器人的快捷方式。
向您的應用程序添加語音控制也可以是增強可訪問性的一種很好的形式。有視覺障礙的用戶可以從語音到文本和文本到語音的用戶界面中受益。
語音合成和語音識別 API 運行良好，可以輕鬆處理不同的語言和口音。可悲的是，他們目前對瀏覽器的支持有限，這限制了他們在生產中的使用。如果您需要更可靠的語音識別形式，請查看這些第三方 API：
- 谷歌云語音 API
- 必應語音 API
- CMUSphinx 和它的 JavaScript 版本 Pocketsphinx（都是開源的）。
- API.AI - 由機器學習提供支持的免費 Google API
