一、 前言
在前面兩天，我們透過 Vibe Coding 快速生成了「AI 酒館」的暗色調 UI 介面，並成功在本地端順利跑起來。身為一個沉浸式的酒館，如果全程只能靠鍵盤打字，似乎少了一點靈魂。 因此，今天的核心目標是為酒館加入語音輸入功能（Speech-to-Text, STT），讓玩家可以透過麥克風直接跟調酒師對話！為了符合我們「100% 免費、零成本」的原則，我們選擇使用現代瀏覽器內建的 Web Speech API。

二、 技術選型：為什麼選擇 Web Speech API？在前端要實現語音辨識，常見的方案有：付費雲端 API（如 Google Cloud Speech-to-Text、Azure Speech）：功能強大但需要申請金鑰、設定帳單與後端轉發。瀏覽器原生 Web Speech API (webkitSpeechRecognition)：優點：現代 Chrome / Edge 瀏覽器原生支援，完全免費，不需額外引入重度第三方 SDK，且不需要後端伺服器中轉。缺點：相容性主要針對 Chromium 核心瀏覽器，且在本地開發環境（localhost）與瀏覽器安全性權限上常有些嚴格的小脾氣。三、 實作步驟與程式碼架構下達 Vibe Coding 需求透過 Bolt.new 或 AI 助手，在介面右側（輸入框旁）新增一個麥克風按鈕，並綁定瀏覽器的語音辨識事件：TypeScriptconst startListening = () => {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
alert("您的瀏覽器不支援語音辨識！");
return;
}

const recognition = new SpeechRecognition();
recognition.lang = 'zh-TW'; // 設定繁體中文
recognition.interimResults = true; // 允許即時返回辨識結果

recognition.onresult = (event) => {
const transcript = event.results[0][0].transcript;
setInputText(transcript); // 將辨識出的文字即時寫入輸入框
};

recognition.start();
};
UI 視覺互動回饋為了讓玩家知道目前正在錄音，AI 也協助在按鈕上加入了錄音中的動態光暈（Pulsing Glow）與狀態提示文字，提升整體互動的沉浸感。

四、 實戰踩坑與除錯紀錄（最真實的開發日常）理想很豐滿，現實往往伴隨著除錯。在實際把語音功能整合進專案時，我們遇到了幾個經典的開發小關卡：權限與安全性限制：瀏覽器對於麥克風的調用有嚴格的安全限制。在本機測試時，必須確保瀏覽器網址列旁的麥克風權限已設定為「允許」，否則點擊按鈕時會瞬間被安全機制中斷。事件流處理：在處理 recognition.onresult 時，若沒有妥善處理 continuous（連續聆聽）與 interimResults 的狀態，容易導致文字無法順利結算並寫入 State。透過調整事件回調與簡化即時字串累積邏輯，才讓文字順利乖乖進入輸入框。這類「邊做邊修」的過程，正是 Vibe Coding 最迷人的地方——我們負責定義需求與方向，而 AI 則協助我們快速重構與排查語音事件的細節！

五、 今日心得與明天預告今日心得：雖然 Web Speech API 在本地端除錯時花了一些時間調整權限與事件綁定，但當看到點擊麥克風、說出話語、文字自動出現在輸入框的那一刻，真的非常有成就感！明日預告 (Day 04)：【實作】讓 AI NPC 開口說話！接下來我們要挑戰文字轉語音（TTS），讓冷酷的調酒師 Mark 用聲音實際回應你的對話！