一、 前言
在前面幾天，我們成功為「AI 酒館」打造了介面，並實現了讓玩家透過麥克風「動口不動手」的語音輸入功能。既然是沉浸式的酒館，光是聽得懂玩家說話還不夠，我們的 NPC 必須具備「開口說話」的能力！

今天的目標是實作 文字轉語音 (Text-to-Speech, TTS)，讓酒館裡的調酒師與吟遊詩人能夠親口把台詞唸出來。同樣地，我們堅持 100% 免費、零成本的原則，直接使用現代瀏覽器內建的 SpeechSynthesis API。

二、 技術選型：瀏覽器內建的 SpeechSynthesis
在前端實現 TTS，常見的有大型雲端 TTS 服務（如 Google Cloud TTS、OpenAI Audio API），但需要繁複的金鑰與付費設定。
而現代瀏覽器（Chrome、Edge、Safari）原生內建的 Web Speech Synthesis API：

零成本、免金鑰：直接調用系統與瀏覽器內建的語音引擎。

開發快速：透過簡單的 JavaScript 介面就能將文字轉為語音串流播放。

三、 實作步驟與核心程式碼
下達 Vibe Coding 需求
請 AI 在對話訊息卡片旁加入朗讀按鈕，並綁定瀏覽器的語音合成物件。

核心朗讀邏輯實作
AI 協助產出的核心語音播放邏輯如下：

TypeScript
const speakMessage = (text: string) => {
if (!('speechSynthesis' in window)) {
alert("您的瀏覽器不支援語音合成功能！");
return;
}

// 停止當前正在朗讀的語音避免重疊
window.speechSynthesis.cancel();

const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-TW'; // 設定繁體中文語音
utterance.rate = 1.0; // 語速
utterance.pitch = 1.0; // 音高

window.speechSynthesis.speak(utterance);
};
使用者體驗優化
當玩家點擊對話泡泡旁邊的小喇叭按鈕時，瀏覽器便會流暢地唸出 NPC 的台詞。配合視覺上的播放動畫，酒館的互動感瞬間提升了一個檔次！

四、 今日心得與預告
今日心得：透過 Web Speech API 的 STT 與 TTS 雙向結合，我們的 AI 酒館正式具備了「聽」與「說」的能力！雖然各家作業系統內建的中文語音聽起來有些許機械感，但以零成本的前端專案來說，其互動效果已經相當驚豔。

明日預告 (Day 05)：【架構】串接真正的大腦！準備將 Google Gemini API 導入酒館，讓 NPC 不再只是講固定台詞，而是能即時對話！