基于前三章的內容，開發AI 對話框語音識別輸入功能：

Tailwind css實戰，基于Kooboo構建AI對話框頁面（一）-CSDN博客

Tailwind css實戰，基于Kooboo構建AI對話框頁面（二）：實現交互功能-CSDN博客

Tailwind CSS 實戰，基于 Kooboo 構建 AI 對話框頁面（三）：實現暗黑模式主題切換-CSDN博客

---

在當今的 AI 應用中，語音交互已經成為提升用戶體驗的重要組成部分。通過語音識別技術，用戶可以更自然、便捷地與 AI 助手進行溝通，無需手動輸入文字。本文將詳細介紹如何在基于 Kooboo 平臺?構建的 AI 對話框頁面中集成語音識別功能，結合 Tailwind CSS 實現美觀且交互友好的語音輸入體驗。實現界面如下：

---

一、語音識別功能概述

語音識別技術允許用戶通過麥克風講話，系統將其轉換為文本并顯示在輸入框中。在 AI 對話框場景中，語音識別可以大大提高輸入效率，特別是對于長篇內容或移動設備用戶。我們將實現以下核心功能：

• 點擊麥克風圖標訪問權限，允許訪問權限后支持語音輸入
• 說話時，識別內容會實時顯示在輸入框中
• 再次點擊麥克風圖標停止錄音，此時內容會保留在輸入框中
• 點擊 "發送" 按鈕或按 Enter 鍵發送內容

二、語音識別基礎概念

1. 什么是 Web Speech API？

Web Speech API 是瀏覽器提供的一組 JavaScript 接口，用于處理語音數據。它主要包含兩個部分：

• SpeechRecognition：將語音轉換為文本（語音識別）
• SpeechSynthesis：將文本轉換為語音（語音合成）

在本文中，我們主要使用?SpeechRecognition?實現語音輸入功能。

2. 兼容性說明

目前主流瀏覽器（Chrome、Edge、Safari）均支持 Web Speech API，但需要注意：

• Chrome/Edge：完全支持，但必須在安全上下文（HTTPS）或?localhost?環境下使用
• Firefox：部分支持，需要用戶手動啟用實驗性標志
• Safari：支持但語法略有不同（使用?webkitSpeechRecognition）

本案例通過以下方式處理兼容性：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

三、實現語音識別功能

1. 基礎代碼結構

// 初始化語音識別對象
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();// 配置識別參數
recognition.lang = 'zh-CN';        // 設置識別語言為中文
recognition.interimResults = true; // 啟用臨時結果，實時顯示識別內容
recognition.maxAlternatives = 1;   // 只返回最可能的結果// 狀態變量
let isListening = false;// DOM 元素
const voiceButton = document.getElementById('voiceButton');
const messageInput = document.getElementById('messageInput');// 開始語音識別
function startListening() {isListening = true;// 更新 UI 狀態voiceButton.classList.add('active');voiceButton.innerHTML = '<i class="fa fa-microphone-slash"></i>';messageInput.setAttribute('placeholder', '正在聆聽...');// 啟動識別recognition.start();
}// 停止語音識別
function stopListening() {isListening = false;// 更新 UI 狀態voiceButton.classList.remove('active');voiceButton.innerHTML = '<i class="fa fa-microphone"></i>';messageInput.setAttribute('placeholder', '輸入消息...');// 停止識別recognition.abort();
}// 綁定按鈕事件
voiceButton.addEventListener('click', () => {if (isListening) {stopListening();} else {startListening();}
});

2. 理解關鍵參數

2.1 recognition.lang

設置識別語言，格式為 BCP 47 語言標簽（如?zh-CN、en-US）。完整語言列表可參考?MDN 文檔。

2.2 recognition.interimResults

• true：識別過程中實時返回臨時結果
• false：只在識別完成后返回最終結果

2.3 recognition.maxAlternatives

設置返回的候選結果數量。例如：

• 1：只返回最可能的結果
• 3：返回 3 個最可能的結果（需要在結果處理中遍歷獲取）

3. 處理識別結果

// 處理識別結果
recognition.onresult = (event) => {let transcript = '';// 遍歷所有結果塊for (let i = 0; i < event.results.length; i++) {// 獲取當前塊的最佳匹配結果transcript += event.results[i][0].transcript;// 如果是最終結果，添加標點符號if (event.results[i].isFinal) {if (!transcript.endsWith('。') && !transcript.endsWith('？') && !transcript.endsWith('！')) {transcript += '。';}}}// 更新輸入框內容messageInput.value = transcript;
};

結果結構說明

• event.results：包含多個結果塊（SpeechRecognitionResultList）
• 每個結果塊包含多個候選結果（SpeechRecognitionAlternative）
• 每個候選結果有：
  • transcript：識別文本
  • confidence：置信度（0-1 之間的數值）
  • isFinal：是否為最終結果

4. 錯誤處理與權限管理

// 錯誤處理（關鍵修改：忽略用戶主動中斷的錯誤）recognition.onerror = (event) => {if (event.error === 'aborted') {// 用戶主動中斷，不顯示錯誤console.log('語音識別已中斷');} else {// 其他錯誤（如網絡問題、權限問題）console.error('語音識別錯誤:', event.error);stopListening();// 根據不同錯誤類型顯示不同提示let errorMessage = '語音識別失敗';if (event.error === 'not-allowed') {errorMessage = '請授予麥克風權限后重試！';} else if (event.error === 'network') {errorMessage = '網絡連接不穩定，請檢查網絡！';}alert(errorMessage);}};

三、使用 Tailwind CSS 美化界面

1. 設計語音按鈕

/* 輸入框內語音按鈕樣式 */.input-wrapper {position: relative;flex: 1;}.voice-button {position: absolute;left: 8px;top: 50%;transform: translateY(-50%);width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;cursor: pointer;color: var(--text-secondary);background: transparent;border: none;z-index: 10;}

?2. 輸入框與按鈕布局

<!-- 輸入區域 --><div class="bg-[var(--bg-primary)] p-4 border-t border-[var(--border-color)]"><div class="flex space-x-2"><!-- 輸入框包裝器 --><div class="input-wrapper"><button id="voiceButton" class="voice-button"><i class="fa fa-microphone"></i></button><input id="messageInput"type="text" placeholder="輸入消息..." class="message-input flex-1 w-full p-2 border border-[var(--border-color)] rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-[var(--bg-secondary)] text-[var(--text-primary)]"></div><button id="sendButton" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">發送</button></div></div>

3. 處理語音識別的結果并實時顯示在輸入框中

// 處理識別結果（優化顯示臨時結果）recognition.onresult = (event) => {let transcript = '';for (let i = 0; i < event.results.length; i++) {transcript += event.results[i][0].transcript;// 如果是最終結果，添加句號（可選）if (event.results[i].isFinal) {transcript += '。';}}messageInput.value = transcript;};

實際運行效果

當用戶說話時：

1. 輸入框會實時顯示識別的內容（包括臨時結果）
2. 說話結束后（短暫停頓），會標記為最終結果并添加句號
3. 如果用戶繼續說話，會繼續追加識別內容
   ?

總結

通過集成語音識別功能，我們的 AI 對話框頁面變得更加智能和易用。用戶可以根據需要選擇文本輸入或語音輸入，大大提升了交互體驗。結合 Tailwind CSS 的強大樣式能力和 Kooboo 平臺的便捷開發環境，我們能夠高效地實現這些功能，并為未來的擴展留下空間。