資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 JavaScript 和語音識別 API 構建語音控制應用程式
近年來，語音控制應用程式越來越受歡迎，使使用者能夠透過語音而不是傳統的輸入方式與技術互動。JavaScript 作為 Web 開發中最廣泛使用的程式語言之一，為構建此類應用程式提供了一個強大的平臺。在本文中，我們將探討如何利用 JavaScript 和語音識別 API 來建立語音控制應用程式。我們將深入探討設定語音識別、捕獲和處理使用者語音以及在應用程式中實現語音命令的過程。
設定語音識別
在開始構建我們的語音控制應用程式之前，我們需要設定語音識別功能。幸運的是，現代 Web 瀏覽器提供了對 Web 語音 API 的內建支援，允許開發人員利用語音識別功能。
讓我們看看如何在 JavaScript 中初始化語音識別 API -
// Check browser support for speech recognition
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
// Create a new instance of the SpeechRecognition object
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
// Configure recognition settings
recognition.continuous = true; // Enable continuous speech recognition
recognition.interimResults = false; // Do not return interim results
// Event handler for when speech is recognized
recognition.onresult = (event) => {
const result = event.results[event.results.length - 1][0].transcript;
console.log('Recognized speech:', result);
};
// Start speech recognition
recognition.start();
} else {
console.log('Speech recognition not supported');
}
解釋
在上面的程式碼片段中，我們首先透過檢查 SpeechRecognition 或 webkitSpeechRecognition 物件的存在來檢查瀏覽器是否支援語音識別。如果支援，我們建立一個新的 SpeechRecognition 物件例項並配置其設定。我們將 continuous 設定為 true 以允許連續語音識別，並將 interimResults 設定為 false 以僅接收最終結果。最後，我們在 onresult 上定義了一個事件處理程式來處理識別的語音。
如果瀏覽器支援語音識別，它將開始偵聽語音輸入。識別語音後，它將在控制檯中記錄識別的語音。
捕獲和處理使用者語音
現在我們已經設定了語音識別，我們需要在我們的語音控制應用程式中捕獲和處理使用者語音。我們之前定義的 onresult 事件處理程式為我們提供了識別的語音。
讓我們擴充套件之前的程式碼以捕獲使用者語音並對其進行處理 -
// ...
// Event handler for when speech is recognized
recognition.onresult = (event) => {
const result = event.results[event.results.length - 1][0].transcript;
console.log('Recognized speech:', result);
// Process the recognized speech
processSpeech(result);
};
// Function to process the recognized speech
function processSpeech(speech) {
// Perform actions based on the recognized speech
if (speech.includes('hello')) {
console.log('User greeted with "hello"');
// Perform greeting action
// ...
} else if (speech.includes('search')) {
console.log('User wants to search');
// Perform search action
// ...
} else {
console.log('Unrecognised speech');
}
}
解釋
在更新後的程式碼片段中，我們添加了一個 processSpeech 函式來處理識別的語音。在這個函式內部，我們可以根據識別語音的內容執行各種操作。在示例中，我們檢查語音是否包含“hello”或“search”一詞，並記錄相應的郵件。您可以根據應用程式的要求自定義操作。
假設使用者說出“hello”或“search”一詞，相應的日誌訊息將出現在控制檯中。如果識別的語音與任何預定義短語不匹配，它將記錄“無法識別的語音”。
實現語音命令
// ...
// Event handler for when speech is recognized
recognition.onresult = (event) => {
const result = event.results[event.results.length - 1][0].transcript;
console.log('Recognized speech:', result);
// Process the recognized speech
processSpeech(result);
};
// Function to process the recognized speech
function processSpeech(speech) {
// Perform actions based on the recognized speech
if (speech.includes('play')) {
console.log('User wants to play');
// Perform play action
// ...
} else if (speech.includes('stop')) {
console.log('User wants to stop');
// Perform stop action
// ...
} else if (speech.includes('volume up')) {
console.log('User wants to increase volume');
// Perform volume up action
// ...
} else if (speech.includes('volume down')) {
console.log('User wants to decrease volume');
// Perform volume down action
// ...
} else {
console.log('Unrecognised speech');
}
}
解釋
在更新後的程式碼片段中，我們擴充套件了 processSpeech 函式以包含諸如“播放”、“停止”、“音量增大”和“音量減小”之類的語音命令。當識別的語音與這些命令中的任何一個匹配時，將執行相應的操作。您可以根據應用程式的要求自定義語音命令和操作。
如果識別的語音與任何語音命令匹配，相應的日誌訊息將出現在控制檯中。例如，如果使用者說“播放”，控制檯將記錄“使用者想要播放”。如果識別的語音與任何預定義命令不匹配，它將記錄“無法識別的語音”。
結論
語音控制應用程式為使用者提供了一種直觀且便捷的方式來與技術互動。透過利用 JavaScript 和語音識別 API，開發人員可以構建功能強大的語音控制應用程式。在本文中，我們探討了設定語音識別、捕獲和處理使用者語音以及在 JavaScript 中實現語音命令的過程。我們學習瞭如何初始化語音識別 API、捕獲使用者語音、根據預定義短語對其進行處理以及相應地執行操作。有了這些知識，您現在就可以開始構建自己的語音控制應用程式並提供無縫的使用者體驗。
總之，JavaScript 和語音識別 API 的結合為語音控制應用程式開闢了一個全新的可能性世界。無論您是開發虛擬助手、擴音控制系統還是任何其他語音驅動的應用程式，JavaScript 和語音識別都提供了建立引人入勝的使用者體驗所需的工具。
430 次檢視
