echo-flow 開源點讀工具：把 MP3+LRC 變成句子級跟讀練習，MIT 授權自架不上傳

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

echo-flow 是一座你自己架的點讀機。給它一對 MP3 音檔和 LRC 字幕檔，它會把整段音檔拆成一句一句，點哪一句就播哪一句，文字跟著同步亮起來；想要中英對照、純英文或純中文任選一種，倍速、單句循環、跟讀模式都掛在介面上。專案以 MIT 授權開源，純靜態檔案組成，素材只存在你自己的瀏覽器裡，不會回傳伺服器。

換句話說，它把以前要買整支點讀筆、或綁在某個收費 App 裡才有的「點到哪、播到哪」練習，壓進一份能放在任何靜態託管的網頁裡。它最早是衝著《新概念英語》四冊做的，後來作者把工具通用化、改名 echo-flow，現在能吃任何你合法取得的音檔與字幕檔，等於一座自己備料、自己架的點讀機。

這篇把它當成認識型導覽，重點放在「它到底夾不夾教材、能不能自己架、會卡在哪」，不替它下效果結論。想用它學某一套教材，素材還是要你自己合法取得再餵進去。文中介面與功能以官方 README 與 demo 站在 2026 年 8 月看到的版本（v1.7.9）為準，後續改版可能與本文描述有出入。

它實際做什麼：把音檔與字幕檔配對，再拆成可點讀的句子

echo-flow 的核心判斷邏輯很單純：讀進一個 MP3 和一份時間軸對齊的 LRC 字幕檔，把字幕依時間戳切句，點任何一句就跳到該時間點播音、同步標示文字。三態語言視圖（純英文、中英對照、純中文）依作者在自薦帖裡的說明，靠的是 LRC 兩種常見的雙語寫法：同行用 | 分隔的中英對照，以及分兩行帶時間戳的雙語字幕；實際匯入時以 demo 站接受的格式為準。翻譯來源要你自己接，工具本身不負責產生譯文。沒有時間軸的純文字稿在這套邏輯裡派不上用場，這也是它和一般字幕編輯器的分工差異：它只負責把做好的字幕變成可點讀的介面，不幫你製作字幕。

作者在功能表列出的播放控制還包含單句循環、整課循環、倍速、斷點續播、跨課自動續播，以及 v1.6.0 起加入的跟讀（shadowing）模式；v1.4.8 起支援 PWA，手機瀏覽器能「加到主畫面」當成 App 啟動。這些是官方揭露的功能，實際順不順手要你自己用看看才準。

介面操作有一組全域鍵盤快捷鍵：空白鍵播放或暫停、左右方向鍵切上一句或下一句、上下方向鍵調音量。這組快捷鍵讓「聽一句、跟著念、按右切下一句」的練習節奏可以全程不離鍵盤，對坐在筆電前練聽力的人比滑鼠點選順手很多。手機上則靠點觸操作，作者在 changelog 多次提到針對 iOS Safari 做相容修正，代表行動端這一塊作者確實有持續在顧。另外還有句子收藏功能，能把反覆練不起來的難句標記起來集中複習，搭配斷點續播，等於幫你把「上次練到哪、哪些句子還沒過關」記在本機。

想要邊聽邊練打字的人，可以把 echo-flow 搭配同樣開源的 qwerty-learner，一個練聽力、一個練拼寫，剛好補上點讀工具不負責的輸出環節。

兩個 demo 並存：一個預載新概念英語，一個空白等你匯入

echo-flow 最容易讓人誤會的一點是，網路上流傳的介紹（多半以「新概念英語點讀」為題）和倉庫現況對不上。實際情況是：專案前身確實叫 NCE-Flow，鎖定《新概念英語》四冊；後來作者盧振華把它改名 echo-flow、通用化成「任何 MP3+LRC 都能餵」的播放器，GitHub 倉庫的 README 開頭就用粗體聲明本工具不提供任何教材音檔或課文內容，免責聲明與支持正版章節也都還掛在上面。讀者如果之前看過舊名 NCE-Flow 的介紹、現在照那個網址找過去卻發現介面變了，多半就是因為這次改名與重新定位，並非走錯站。

但作者同時保留了另一個網址 nce.luzhenhua.cn，那是一個已經預載四冊課文、設了「正版承諾」彈窗（要你確認已購入正版教材才能進入）的部署版本；另一個 echoflow.zhenhua.lu 才是對齊倉庫現況的通用 demo，打開是空的，要求你自己匯入素材。也就是說，工具本身是乾淨的純播放器，預載教材的是作者另一個部署站，這兩件事要分開看。預載站把整套有版權的教材音檔放上去、用「我先問過你有沒有買正版」當門檻，法律上成不成立是另一題，至少本文不會把那個網址當作推薦入口；想自用，建議走下面自己架、自己餵素材這條路。

把工具和內容拆開，是判斷這類學習資源時該養成的習慣：開源程式碼走的授權條款（這裡是 MIT），和它播放的教材內容走的版權條款，是兩條完全獨立的線。MIT 程式碼可以自由改作沒有問題，但教材音檔與課文仍屬於原出版商，把它們打包進自己部署的站點公開給別人用，風險落在部署者身上，與 MIT 授權的工具本身無關。echo-flow 把這條線畫得很清楚是好事，但也就代表你選擇用預載站、或自己塞教材時，這個判斷是躲不掉的。

Pin

自己架 echo-flow 的三種方式

echo-flow 是純靜態檔案（HTML、CSS、JavaScript，外加 Service Worker 處理離線快取），官方提供三種部署選擇，從最快到最手工：

• Docker（最快）：一行指令拉官方映像檔 luzhenhua/echo-flow:latest 起來，綁本機 8080 埠即可。docker run -d -p 8080:80 --name echo-flow --restart unless-stopped luzhenhua/echo-flow:latest。
• docker-compose：把倉庫 clone 下來，在目錄裡跑 docker-compose up -d，適合想順手改 nginx 設定或掛在同一部主機其他服務的人。
• 本機靜態伺服器：用 Python http.server、Node npx serve，或 VS Code 的 Live Server 都行。

這裡有一個新手最容易踩的雷：直接在檔案總管雙擊 index.html 開不動。README 明白標示，因為瀏覽器基於安全策略擋掉 file:// 協定下的 IndexedDB 與模組載入，所以一定要過一個 HTTP 伺服器。懶得裝 Docker 的人，npx serve 一行就能起一個臨時伺服器，是最快的試用方式。打算長期放在自己網址上的人，建議走 docker-compose 那條：映像檔底層是 OpenResty（nginx 加上 Lua），比 Docker 單行指令多花十分鐘設定，但維運彈性好很多，也能順手在設定檔裡掛上 HTTPS 或存取限制。

這裡要分清楚兩種部署的差別。用純靜態託管（Cloudflare Pages、GitHub Pages 或本機靜態伺服器）時，echo-flow 完全沒有後端、沒有資料庫、沒有會員系統，素材只進瀏覽器的 IndexedDB，部署成本接近零。Docker 部署則額外帶一個預設關閉的同步後端（/api/userData），啟用後能把素材存到宿主機的 ./data 目錄、跨裝置同步；要不要開這個同步由你自己決定，預設不啟用就等同於純靜態的行為。不論哪種部署，echo-flow 都不負責「老師派功課給一班學生、回收進度」這類需要會員系統協調的事。想要對外開放給親友使用，建議在前面再加一層反向代理處理 HTTPS 憑證，順便擋掉搜尋引擎索引，避免你私人架的站點變成下一個公開的教材來源。

Pin

素材哪裡來：MP3 與 LRC 的準備鏈

echo-flow 不附素材，意味著你得自己備料。最常見的兩段準備工作：把手上音檔轉成 MP3，以及為它準備一份時間軸對齊的 LRC。音檔格式轉換可以交給瀏覽器端的 mp3to 這類工具，不用安裝；若你手上只有 PDF 教材或長篇文字、想反過來生一段配音檔練聽力，text2voice 這類邊緣 TTS 工具能直接合成 MP3。LRC 字幕檔則可以從手上的逐字稿，搭配 前端語音轉文字工具反推時間軸，或手工對齊。這條準備鏈對從零開始的人不算短，但好處是素材完全在你手上，教材壽命不會隨某個雲端服務收掉而歸零。

用純靜態方式部署時，匯入的素材只進瀏覽器的 IndexedDB，不會被送上伺服器，這是 echo-flow 在隱私層面上最關鍵的設計：換到別的裝置、清一次瀏覽資料，素材就會跟著消失，要重新匯入。這對隱私有好處，但對「想跨裝置同步進度」的人是反作用。Docker 部署可以選擇啟用內建的同步後端，把資料存到你自己控管的宿主機，兼顧跨裝置與資料自主；商業語言 App 把素材放上雲端那條路，在這裡換成你自己當雲端的主。不論走哪條路，資料流向都看得到、改得了，這是開源工具相對於閉源 App 的根本優勢。

會卡住你的硬限制

• 不附教材：下載下來是空的，所有音檔與字幕自己想辦法合法取得。作者的預載站把這道牆打破，但版權風險由該部署自行承擔。
• 一定要過 HTTP 伺服器：雙擊 index.html 會壞掉，這是 IndexedDB 與 Service Worker 的先天限制，算不上 bug。
• 跨裝置同步視部署而定：純靜態部署下素材綁單一瀏覽器，換裝置等於從零開始；Docker 部署可啟用內建同步後端（預設關閉）把資料集中到宿主機。
• LRC 格式要對：只吃時間軸對齊的 LRC，純文字逐字稿沒時間戳沒辦法點讀；中英對照建議用同行以 | 分隔的格式（例如 [00:12.34] How are you?|你好嗎？），兩行帶時間戳的雙語 LRC 也相容，但混用時偶爾會判讀不出中英對應關係。
• 效果未驗證：學習效果、長期穩定度、是否優於其他點讀 App，這些官方資料回答不了，要自己用一輪才知道。

判斷與第一步

echo-flow 適合的人很明確：手上有合法教材音檔、不想再把素材交給第三方雲端、願意花十分鐘架一個 Docker 容器的人。如果你的需求只是「打開瀏覽器就能直接聽新概念英語」，作者的預載站比較省事，但你得自己過版權那一關；如果想要的是一套涵蓋發音、拼寫、測驗的完整學習環境，echo-flow 只負責點讀這一環，其他要靠它與 qwerty-learner 這類工具自己拼起來。和把整個學習紀錄託管給商業語言 App 相比，echo-flow 換來的是完全的素材掌控權與隱私，代價是你要自己準備內容、自己架、自己維護一個網頁服務。

反過來說，如果你連 LRC 是什麼都沒聽過、也不想碰任何指令列，echo-flow 現階段的學習曲線可能比它帶來的好處更重。它假設你願意先花一個下午把字幕格式弄懂、把音檔準備好，之後才開始享受點讀的便利；這個前期投入對已經在學某套教材、手上有現成音檔的人相當值得，對只是想隨手點開試聽的人就不一定值得。

想試用，最快的路徑是打開通用 demo 站 echoflow.zhenhua.lu，丟一對自己準備好的 MP3 與 LRC 進去，點幾句看看介面順不順手；確認合用之後，再回 GitHub 倉庫用 Docker 把它搬到自己機器上長期使用。MIT 授權的好處是，將來想改介面、接自己的字幕翻譯流程、或把整套打掉重練，都沒有法律上的障礙。對自學語言的人來說，能夠把素材完全握在自己手裡、又走開源授權、還不把學習紀錄外流的工具，在一片要把資料送上雲端的產品裡，是少見又能長久維持的選擇。