網站聽文章按鈕實作：非 WordPress 站都做到

一句答你：自家網站加「聽文章」按鈕，最穩陣嘅做法係預生成——文章出街或者更新嗰陣自動生成音頻檔，放喺你自己嘅檔案空間，前端擺一個普通嘅播放按鈕。唔使等訪客撳嗰刻先生成，體驗同可靠性都好得多。

「聽文章」已經由加分位變成基本盤：通勤族聽、視障用戶靠、長者鍾意，連搜尋引擎對音頻內容嘅重視都喺度上升。WordPress 有現成插件，但自家開發嘅網站（Next.js、Astro、自家 CMS）就冇現成嘢裝。呢篇講點樣由零加一個企理嘅聽文章功能——由管線、聲線、播放器到成本。

Key Takeaways

• 兩條路線：預生成（文章發佈時自動生成音頻檔）係主流；動態生成（訪客撳先生成）只適合極少數場景
• 五步管線：文章發佈 hook → 文字清理 → 分段（每任務 500 字符上限）→ 生成 → 合併入庫
• 播放器要過無障礙關：aria 標籤、鍵盤操作、播速調整，呢啲唔係加分位係基本要求
• 全站同一把聲線：聽文章嘅聲就係網站嘅「聲音門面」，唔好似試衫咁成日換
• 一篇 1,500 字文章嘅生成成本大約幾毫子，成個站幾百篇文章都係幾十蚊水平
• 音頻檔放自己檔案空間加 CDN，唔好直接擺語音服務嘅連結（有時效）

點解要加聽文章功能

通勤場景係硬需求

香港人每日通勤時間長，地鐵入面睇字費眼，聽嘢係自然姿勢。你嘅文章如果有「順路聽埋」嘅能力，停留同觸達就唔再局限喺屏幕前嗰段時間。好多讀者係聽完覺得好，先返嚟睇字重讀——音頻版係入口，唔係替代品。通勤收聽嘅高峰正正係朝早同黃昏嘅交通工具入面，你嘅內容跟住人潮走，觸達窗口自然多咗。

無障礙唔再可以當冇到

視障用戶靠屏幕閱讀器逐個元素聽頁面，體驗斷裂辛苦。一段排版好嘅原生音頻（語速自然、結構清楚）係完全唔同層次嘅服務。機構網站、公共資訊網站呢方面已經有實際要求，商業網站做咗都係實實在在嘅品牌分。有關視障用戶聽讀嘅整體場景，可以睇《視障人士粵語聽讀指南》。

SEO 同 AI 搜尋角度

搜尋引擎同 AI 搜尋愈嚟愈重視多模態內容同頁面體驗。音頻版唔會直接令排名飆升，但佢帶嚟嘅停留時間、完聽率、跨場景觸達，都係頁面質素嘅真實訊號。再加埋音頻平台嘅分發位（部分站點會將音頻同步去 podcast 平台），一稿多渠道先係完整玩法。

有音頻嘅頁面，行為數據唔同

有播放功能嘅頁面，會多一類「聆聽完成」嘅行為訊號。呢啲訊號對內部判斷內容質素有參考價值——聽完成率高嘅文章，通常係真係好讀嘅文章；聽到一半大量流失嘅位，就係內容要改嘅位。

兩條路線：預生成 vs 動態生成

點解預生成係主流

九成場景應該揀預生成：文章幾時出、幾時改，你係知道嘅，音頻就跟住嗰個時間點更新。動態生成唯一嘅優勢係「唔使預先處理」，但代價係體驗同可靠性，通常唔抵。

混合路線：熱門文章動態補

折衷做法係：常規文章行預生成；突發或者極長尾嘅內容，先開放動態生成加快取（第一個訪客觸發，之後嘅訪客食快取）。呢條路對工程要求高啲，流量穩定嘅站先值得。

預生成管線：由發佈到音頻

五步管線

1. 觸發：文章發佈或者更新嘅 hook（或者定時掃描更新時間戳）
2. 文字清理：由正文抽純文字——去連結語法、去圖片說明、表格轉口述句（「呢個表列出三個方案」）、程式碼段照讀定略過要有政策
3. 分段：每個生成任務上限 500 字符，按段落邊界切，一篇 1,500 字文章通常三四段
4. 生成：逐段提交生成任務，攞返每段音頻；批量提交一次最多 25 個任務
5. 合併入庫：段音頻拼接成單一檔案（或者保留分段做章節播放），入你嘅檔案空間，記錄文章版本

第 2 步係成條管線嘅質素關口：表格同連結語法唔清理，音頻會讀出一堆怪嘢。有關文字稿處理嘅通則，可以參考《貼稿生成檢查清單》。

檔案管理

• 檔名跟文章 slug（例如 cantonese-tts-guide.mp3），唔好用文章 ID——遲早有遷移或者合併
• 文章更新嗰陣：重生成、替換檔案（新版本號或者直接覆蓋加 CDN purge）
• 保留同文章版本嘅對應關係，搞錯版本係呢類系統最常見嘅事故
• 站點大嘅話，全站初始化（幾百篇）安排喺深夜批量跑，分幾晚完成都得

動態生成管線：如果真係要行

結構同預生成一樣，只係觸發位唔同

訪客撳播放 → 你嘅後端查快取：有，返音頻；冇，提交生成任務 → 輪詢結果 → 返音頻兼落快取。呢條路要處理三件事：

• 後端要設併發上限（語音服務在途任務按方案由 3 至 20 個），超咗就自己排隊
• 生成中嘅訪客要有過渡 UI（轉圈仔、骨架屏），唔好令佢以為個掣壞咗
• 快取要設淘汰策略，唔係無限儲——儲存成本低但管理成本唔低

唔好令訪客等超過幾秒

排隊時間以秒計，但高峰時段可能更長。設一個上限（例如八秒），超時就顯示「稍後再試」或者跌返文字版——寧願優雅降級，都唔好吊住個訪客。體驗原則同做任何網站功能一樣：反應快過一杯茶涼。

聲線同播感：你網站嘅聲音門面

聲線選擇原則

全站同一把聲——聽文章嘅聲就係網站嘅聲音品牌，同 logo 一樣要一致。揀聲線用你最長最正式嗰篇文章試聽：連續聽十分鐘唔攰、口語詞讀得自然、中英夾雜唔尷尬，先算過關。揀好之後寫入文檔，之後所有文章都用同一把，唔會幾個月後「換咗個主播」。

數字同專名處理

清理層順手處理讀音細節：日期轉口語（「2026-10-09」變「二零二六年十月九號」）、金額連單位、常用專名建立讀音表（人名、品牌名、地方名）。呢張讀音表係站點嘅長期資產，越養越準。

試聽清單

上線前用三類文章做樣本試聽：一篇技術文（多英文詞）、一篇故事型文（長句多）、一篇新聞型文（數字多）。三類都過關，成個站嘅內容範圍基本 cover 到。

前端播放器：細節決定成敗

無障礙三件事

• aria 標籤：按鈕要有清晰嘅無障礙名稱（「播放本文音頻」），唔可以得個圖案冇文字
• 鍵盤操作：Tab 到、Enter 撳、空白鍵控制播放暫停——屏幕閱讀器用戶同埋習慣鍵盤嘅用戶都靠呢啲
• 播速調整：提供 0.75 至 2 倍速，快速讀者同聽力較弱嘅長者都需要

斷點續聽

記住訪客聽到邊（localStorage 存進度），返嚟可以由斷點繼續。呢個細位對長文好重要——通勤聽咗一半，返到公司想聽埋佢，斷點續聽令佢真係聽完。

播放器放邊

文章標題附近（訪客一入場就見到）比文末好。文末播放器得已經讀完嘅人先會搵——你想要嘅係未開始讀嘅人揀聽。流動版再將按鈕做大啲，拇指掂到先係真有用。

成本捉算

一篇幾多錢

語音生成大約 240 個字符生成一分鐘語音，按字符收費。一篇 1,500 字文章 ≈ 六分鐘左右音頻。以港嘢專業方案（HK$338 一個月、600,000 字符）計，單篇文章成本幾毫子；一個 500 篇文章嘅站做全目錄音頻化（約 75 萬字符），都係一兩個月配額嘅事。

免費額度試水

開戶有每月 5,000 字符（月月重置）免費額度（大約 21 分鐘音頻），夠你試生成兩三篇文章感受質素先至投入工程時間。試完覺得掂，再開 API 搞管線，次序唔好倒轉。

更新先係長期數

初始全目錄化係一次性成本，長期數係「每月新文章加修改」。假設每月 30 篇新文加 30 次修改，每月大約 9 萬字符——入門方案（200,000 字符）都夠，專業方案（600,000）更加闊落。有關全站音頻化嘅媒體業案例，可以睇《網媒聽新聞實作》同《WordPress 粵語 TTS 插件》。

上線之後：維護同指標

每月三個檢查位

一、抽查五篇最新文章嘅音頻，確認同文字版本對應冇錯位；二、睇生成任務失敗率，突然升高通常係文字入面有新嘅怪格式；三、睇聽完成率走勢，留意有冇成批文章嘅完聽率突然跌（好多時係清理規則出咗問題，唔係內容問題）。

供應商變動點應對

語音供應商嘅聲線目錄、定價、介面都可能變。防護位係：管線層隔離——你嘅管線只認「生成呢段文字、出呢個檔案」呢個抽象介面，聲線參數集中一處管理。真係要換供應商，改一層設定，唔使全站改 code。

團隊分工：編輯流程入面點插

內容團隊做嘅嘢

編輯出稿嗰陣多加一步「音頻版把關」：讀一次清理後嘅純文字稿（就係將被讀出嚟嗰版），唔通順嘅位改返。呢步五分鐘，但令音頻版嘅專業度完全唔同。修改文章嗰陣，編輯要標注「音頻需重出」，觸發管線重生成。

工程團隊做嘅嘢

管線搭建（一次性）、播放器嵌入（一次性），之後就係監察：生成任務成功率、音頻同文章版本一致性檢查（可以定時掃描比對）。日常維運量好細，一個輪值監察清單就 handle 到。

常見陷阱

連結過期

生成完攞到嘅音頻連結有時效（已入庫 1 小時、生成端 7 日）。管線入面要即刻將音頻落自己檔案空間，前端只播自己空間嘅檔案。任何「直接擺語音服務連結入頁面」嘅偷懶做法，遲早出「聽唔到」事故。

表格同程式碼讀到亂晒

Markdown 表格原封不動交俾語音引擎，會讀出一串分隔線同管道符。清理層必須處理：表格轉口述句或者略過、程式碼段略過或者只讀註釋、圖片 alt 照你嘅政策決定讀唔讀。

音頻同文字唔同步

文章改咗，音頻冇重生成——訪客聽同文唔對版。觸發機制要 cover「修改」而唔止「新增」，並且喺管理介面顯示音頻版本同文章版本嘅對應狀態。

播放器搶走頁面焦點

自動播放係大忌（瀏覽器都會擋）；另一個常見錯係播放器載入時搶走鍵盤焦點，令鍵盤用戶行唔到頁面。播放器永遠被動等待啟動，焦點管理要過無障礙測試。

常見問題 FAQ

文章入面嘅連結，音頻版點處理？

清理層將連結轉做自然語言：正文連結通常略過（讀埋連結網址係災難），重要嘅外連資訊改寫做口述（「詳細清單喺我哋嘅指南頁面」）。音頻版嘅目標係「聽得明」，唔係「可以撳」。

播速調整邊個做？

播放器端做。音頻檔維持原速，播放器提供 0.75 至 2 倍速，咁樣同一個檔案可以服務唔同聽眾。唔好生成幾個速度嘅版本——浪費儲存同管理成本。

要唔要顯示音頻由 AI 生成？

建議顯示。簡單一句「本文音頻由 AI 語音生成」已經足夠，呢個係誠信位，部分司法管轄區仲已經係法定要求方向。

多語言站點點處理？

每個語言版本獨立管線：粵語版用粵語引擎生成，其他語言用對應嘅工具。音頻檔案命名加語言後綴（slug-zh.mp3、slug-en.mp3），hreflang 對應入埋音頻，令搵特定語言版本嘅讀者可以直接去到。

訪客撳咗但瀏覽器擋咗自動播放點算？

撳播放係用戶主動動作，一般唔會被擋；被擋嘅係「頁面載入即自動播」。所以設計上由用戶啟動播放，就冇呢個問題。千祈唔好貪方便加自動播放，體驗同規範都唔容許。

聽完成率去邊度睇？

播放器埋點（開始、25%、50%、完成）送去你嘅分析工具。呢啲數據令你知道邊類文章受歡迎用「聽」嘅方式消費——對內容策略嘅參考價值好高，仲可以話你知邊啲文章值得優先做多媒體版本。

[!CTA]

令你嘅文章識講嘢

去港嘢 Playground 試好聲線同語速，跟呢篇管線今個星期就令成個站出聲。