【開發日誌】從 Gemini 到 Ghost：打造專屬韓文朗讀工具，優化 Web Speech API 朗讀體驗

最一開始，我的需求其實非常單純。在學習韓文的過程中，我發現市面上的工具往往太過複雜，
我只想要一個可以：

• 貼上韓文文字：隨時放入想練習的句子
• 一鍵播放朗讀：即時獲得發音回饋
• 掌握朗讀節奏：幫助我更順地聽懂韓文的語速

我不是為了開發產品而開發，而是希望擁有一個「我每天真的會用」的工具。
於是，我從 Google AI Studio（Gemini）開始，透過英文 Prompt 描述需求，
請 AI 協助我產出一個網頁版的 Korean TTS（Text-to-Speech）。

第一版技術架構：HTML + Web Speech API

在 Gemini 的協助下，第一個版本很快就誕生了，其核心技術選型如下：

• Web Speech API： 使用瀏覽器內建引擎，無需額外付費或串接服務
• 語音選擇： 鎖定韓語語音（ko-KR）
• 基礎功能： 支援播放、暫停、停止，行動裝置也能運作

實作挑戰：Chrome 瀏覽器的 API 限制

為了讓使用者知道朗讀進度，我嘗試加入「同步反白」功能，用到 onboundary 事件與 charIndex。
然而，我遇到了嚴重的跨瀏覽器相容性問題：

• Edge（Microsoft TTS）： 運作穩定，反白精準
• Chrome（Google TTS）： 事件觸發極不穩定，導致文字無法同步反白

架構轉向：從「逐字反白」改為「句子斷點」

面對瀏覽器實作限制，我決定不再硬修 Chrome 的問題，而是調整邏輯：

• 句子切割： 將長篇文字切成「句子」陣列

逐句朗讀： 系統明確知道目前進度，UI 標示目前句子

🚀 版本迭代與優化紀錄（Changelog）

📅 2025-12-30｜v0.2 階段：核心邏輯重整與技術決策

在原型版本完成並投入實際使用後，我針對複雜文本與不同裝置的行為進行了深度測試， 重點在於定義問題優先級。

• 韓文句子切分： 數字、條列符號會造成錯誤斷句
• iOS Safari Autoplay： 規劃加入 UI 提示
• 語音清單非同步： 確保 getVoices 正確載入

本階段結論： 優先確保「斷句精準度」。

為什麼選擇將工具放在 Ghost 平台？

• 固定網址： 方便在不同裝置隨時存取
• 承載開發紀錄： 工具與日誌並存
• SEO 潛力： 讓有相同需求的學習者能找到

👉 Day 1｜小白站長成功架站啦！用 ChatGPT + Zeabur + Ghost 完成部落格起手式
👉 Zeabur 推薦連結（新註冊 $5 折扣）

結語：從學習者出發的技術實踐

這段開發旅程讓我學到，解決使用者的痛點（即便是自己的痛點），才是開發的核心價值。