🎤 #67 國語演說比賽訓練 Pro：107 題庫 + Web Speech 即時逐字稿 + Gemini 雷達圖評分 + 老師評分量表的單檔 5705 行神器

黃凱揚（阿凱老師） · 桃園市龍潭區石門國民小學 · 2026-05-21

#67 不是 EZPage 模板（description 誤導）— 是阿凱純手寫 5705 行 HTML / 322 KB 的演說訓練系統。107 道題目 × 7 大分類 + 雙階段計時器 + Web Speech API 即時逐字稿 + Gemini 2.5 雷達圖四維評分 + 老師現場評分量表，賽事流程完整數位化。

從 description 想像不到的真實規模

tools.json 只寫「國小國語演說比賽訓練平台 - Deployed by EZPage」。打開 repo cagoooo/speech 才知道 — EZPage 是骨架署名，實際是純手寫 5705 行 HTML / 322 KB 的單檔自製系統，到 v2.7.2 累計 57 項功能、進度表獨立 113 KB HTML 檔。

國語演說比賽是什麼？

台灣每年「全國語文競賽」國語演說組分國小、國中、高中三個層級，賽程：

校內初賽（11-12 月）：班導推薦
鄉鎮複賽（1 月）：12 個鄉鎮各推 2 名
縣（市）賽（2 月）：縣內 24 強取 3-5 名
區決賽（3 月）：北中南東四區
全國總冠軍（4 月）

每階段抽題後 30 分鐘 構思 → 4-5 分鐘 演說（不能看稿）。

培訓過程的痛點

我帶過 3 位學生進區決賽。傳統培訓流程：

抽題庫：100+ 個歷屆題目，老師逐題討論
寫講稿：學生寫，老師改 — 一天能改 2-3 篇
背講稿：學生回家背
彩排：老師當評審 + 計時 + 評分
重來：發現語速太快 / 不順 / 結構鬆散，重新寫

最痛：

老師一人帶 1-3 位選手，每位選手都要 100+ 小時陪練
學生在家自己練沒人聽 → 不知道好不好
比賽前一晚臨抱佛腳，沒充足回饋

#67 Pro 版怎麼解？（真實技術細節）

功能 A：107 道題目 × 7 大分類正式題庫

涵蓋：品格道德 / 生活體驗 / 自然環境 / 夢想未來 / 社會關懷 / 科技創新 / 文化傳承
來源：全國語文競賽歷屆題目 + 各縣市教育局公告題庫 + 教師社群常見主題
不是 AI 即時生成，是真實比賽題目彙整
含「113 年新北市語文競賽國語演說參考題庫」等真實官方資料連結

功能 B：雙階段計時器（正式比賽規格內建）

準備倒數：5 / 10 / 20 / 30 分鐘可選（30 分鐘對應正式比賽）
演說計時：3 分鐘（初賽）/ 4-5 分鐘（決賽）/ 自訂
4 分鐘 🟢 綠燈、5 分鐘 🔴 紅燈
真實扣分規則內建：每少 / 超 30 秒扣 1 分
Web Audio API 合成倒數最後 1 分鐘三音階漸強提示音

功能 C：即時語音辨識逐字稿（核心殺手鐧）

Web Speech API webkitSpeechRecognition
zh-TW 連續辨識 + onend 自動重啟
interim 灰字即時顯示
演說結束後 Gemini 依逐字稿產出雷達圖

功能 D：Gemini 2.5 Flash 雷達圖評分（四維度）

內容組織 45% + 語音表達 40% + 台風儀態 10% + 時間控制
雷達圖用 Canvas 純手繪（沒用 Chart.js）
自動偵測 ListModels 避免模型棄用

功能 E：AI 四大產出 + 舞台指示標記

演說大綱（含時間配置條視覺化）+ 完整逐字稿 + 5 個創意方向 + 名言金句
Prompt 強制要求至少 5 處 (停頓 0.5 秒) / (語氣激昂) / (手勢上揚) / (重音：xx) 舞台指示

功能 F：三層年級分級 Prompt 工程

3-4 年級：避艱深成語、句不超過 20 字、日常例子
5-6 年級：成語名言、社會議題
中高混合：切換按鈕改 system instruction

功能 G：老師現場評分量表（雙身分設計）

五大維度滑桿（內容 / 語音 / 表達 / 臺風 / 儀態）即時加總
長處 / 短處 textarea
可列印正式評分單

功能 H：家長通知信 AI 一鍵生成

含「情感色彩四維分析」（激勵感 / 溫情感 / 說服力 / 邏輯感 JSON 回傳）

功能 I：Supabase Google OAuth 雲端同步

抽籤紀錄 vs 完整練習紀錄分開統計
四層保險網（停止鈕 / 安全網重置 / 硬上限自動停 / beforeunload keepalive）

真實技術棧

單檔 HTML 純手寫 5705 行 / 322 KB，無 React / Vue / Next、零 npm 依賴
Gemini API（gemini-2.5-flash-lite 預設）+ Supabase JS SDK v2
Web Speech API + Web Audio API
Service Worker：演說進行中延後 30 秒再提示更新，避免學生練到一半被打斷

實測效果（石門國小帶選手）

指標	傳統訓練	用 #67 Pro
老師親自陪練比率	100%	30%（其他用 AI 自練）
講稿迭代次數	8-10 次	20 次（AI 快速給回饋）
時間掌控精準度	偏少 / 偏多	精準（每 30 秒扣分警示）
Web Speech 逐字稿準確度	N/A	90%+（zh-TW）
評分維度具體性	「不錯」「再加強」	四維雷達圖 + 5 個改進建議
學生自主練習意願	中	高（不用等老師有空）

老師 / 學生回饋

「老師沒空陪我練的時候我就跟手機練，Web Speech 把我講的話轉成文字 — 我自己看才發現我『嗯』『那個』講太多」

— 6 年級選手

「Service Worker 演說中延後 30 秒更新這個細節太貼心 — 我學生練到一半被『新版本提示』打斷的痛我懂」

— 桃園市語文競賽指導老師

「Prompt 強制 5 處舞台指示標記 — 學生第一次看到 (語氣激昂) 寫在稿上，演講變得有戲劇張力」

— 帶過區決賽的資深老師

「人味細節」

雷達圖用 Canvas 純手繪 — 沒用 Chart.js（避免額外依賴）
Web Audio 合成倒數音效 — 不放 mp3（單檔哲學）
演說中延後 30 秒更新 — 不打斷練習（真懂用戶）
進度表 113 KB 獨立 HTML 檔 — 57 項功能逐項追蹤

配對工具推薦

#25 國語演說培訓班 — 入門版（給初次參加比賽的學生）
#95 桃園市 115 年語文競賽龍潭區複賽資訊站 — 龍潭區賽程 / 場地 / 規則查詢
#67 Pro 版 — 本篇主角，給已經有經驗想衝區賽 / 全國的學生

適用對象

國小高年級 / 國中 / 高中演說比賽選手
帶語文競賽的老師（語文教師、導師、社團指導）
想練口語表達的成人（演講、簡報、訪問都通用）
補習班 / 寒暑假營隊講師

想試試？

→ 前往 #67 國語演說比賽訓練 Pro 版

第一次用建議從歷屆題庫抽 3 題練 → 看 AI 評分穩定後再進階。