用 Cursor 打造電子書朗讀工具：實作記錄與反思
03/01/2026 ・ Design
前言 – 實作輕量的功能
自己有時候會有聽電子書或語音朗讀的習慣，也有試過 Speechify、ElevenLabs 。
其中 Speechify 裡的某一個台灣女聲是我可以接受的，而 ElevenLabs 在他們平台從剛開始發展到最近、比較過聲音後，我都付費用過，但台灣的語音都不穩定或是有中國大陸的腔調，聽了不習慣。後來研究了一下，發現自己比較能接受的語音是來自 Azure Speech Studio 的語音，曉臻 (女聲, 台灣) – zh-TW-HsiaoChenNeural。
一開始是在 Azure Speech Studio 裡貼文字朗讀，接著試著用 Cursor 實作在瀏覽器內用，extension 朗讀網頁內容。
然後，截圖自己用過覺得不錯的朗讀工具介面，列下常用的功能。
接著丟入 Cursor -> 大功能我通常會先用 Cursor 的 Plan mode：
我很喜歡 Plan mode 的環節，因為通常在這個環節列出需求、基本的架構、思考哪些功能會要優先執行等。
這些都是以文字、清單方式以最小力度的草稿環節，紀錄。
畢竟，比起在腦中想，不如列下來，才能看到整個專案會有多大、會有哪些功能不是必須的等等！
有開始才有機會嘗試、試錯！
製作過程中，雖然遇到一些問題（像是同時播放兩三個音軌、標色的位置與朗讀的進度不一致等等），但只要在與 Cursor 實作過程中，請它在程式裡加 Console 來除錯，以便找出哪一個環節出錯，基本上就能夠解決大部分的問題。
最後實作成功！
| Side panel 朗讀介面 | 設定介面 |
 |
 |
裝了這個 extension 後可以開啟側欄進行朗讀，在朗讀的過程中，也可以切換到不同頁面。
朗讀讀到的句子也會標色、標色句子也會捲動到可視範圍內。
逐步擴大到網頁的需求
延續前一個小工具，接著我列下幾個基本功能需求：
- 可以上傳 PDF、EPUB 或貼上文字等來源後，可以朗讀這些文字內容
- 使用網頁呈現，可以用電腦或手機瀏覽，開著後就能播放
- 會紀錄最後一次朗讀的位置
- 正在朗讀的句子會標色
- 會自動捲動頁面，讓標色的句子出現在可視範圍內
- 關於 EPUB 上傳與轉換讀取：
- 上傳後轉檔成功後，需顯示章節 Sidebar 以便快速從那個章節開始朗讀
- 瀏覽方式：內容以捲動方式呈現
實作步驟
優先實作前端串接到 Azure Speech Studio、優先測試貼上部分文字內容朗讀、朗讀位置標色等，在這個環節同樣遇到和 extension 時一樣的不同步、重複音軌等問題，但因為之前遇到過，所以這次蠻快修正。
這次比較大的功能是：文件內容要上傳到哪邊？
列下基本的需求（只有我會用、資料內容單純只有 EPUB、PDF，我希望越簡單或輕量最好），詢問過幾個 AI 都提過 Firebase，在與 AI 評估後，也許 Azure 有服務可以儲存這個資料、可以實作靜態頁面等。
後來使用的技術清單：
前端
- React 18 + TypeScript
- Vite
- Azure Cognitive Services Speech SDK
後端
- Azure Functions (Node.js + TypeScript)
- Azure Table Storage（存儲 metadata）
- Azure Blob Storage（存儲內容）
介面
下面是實際做出來的樣子：首頁、上傳內容、朗讀內頁與設定頁。
| 首頁 | 上傳內容 |
 |
 |
| 朗讀內頁 | 設定頁 |
 |
 |
實作後的反思
在實作的過程中，原先我以為最讓我擔心的串接後端、使用不熟悉的服務（Azure Speech、Azure Storage 等）是一大難關，但隨著 AI 模型越來越聰明，後端串接到使用 Azure 服務、甚至到我應該在 Azure 點擊哪個頁面、應該複製哪個 API key 等，都可以詢問 AI ，然後逐步完成。
最後這個網站前後只花了兩個禮拜的週末就完成了。
有了一次使用後端串接服務後，我也試著將我常用的 Tab 管理工具使用 Cursor 實作出來。 （大概兩天）
實作的工具：文字轉語音的網站或 Extension、Tab 管理工具，都是我之前有付費訂閱過的產品，但現在都被實作出來了。
可以想見這些工具，未來會越來越難賺錢，現在也已經能看到很多相似的服務，但最後用 Cursor 實作這些工具，只需要服務我一個人的需求。原本我在用這些服務時，我只會使用部分的功能，而只有我一個人使用時，我只要考量我一個人想要的需求，Vibe coding 就像將一個最基礎的原料——程式碼，然後依據我的使用經驗完成一件訂製的工具。
那麼，未來的產品設計會是什麼樣？
說實在話，完成這些工具後，我很難不感到焦慮。我本身在做 SaaS 產品設計，今天是我用 AI 實作出一個我原本要付費的服務；若換成我是那間公司，我就是流失了一個付費使用者。另一方面，我也確實很佩服 AI 的進步，能讓一個人就做出以前要付費才有的東西。
焦慮歸焦慮，我並不覺得一切就沒有希望。直到現在，還是有不少產品或服務我會持續付費使用：有的是體驗做得很好、有的是像雲端儲存那樣不可或缺的基礎服務、有的是那個領域我完全不熟悉（例如開發者工具）、有的則是平台或服務規模太大——當然我不會想做一個 Google。這些都讓我願意繼續付費，也讓我不斷思索：使用者真正要的價值是什麼、產品又該怎麼做出差異。這些問題，成了我最近最常思考的事。