🎸 #41 吉他點唱系統「阿凱彈唱之夜」：用 Firestore 即時投票 + 卡帶雜誌風大螢幕模式打造演出儀式感
#41 不是教吉他課的工具，是阿凱老師的「彈唱之夜演出系統」。觀眾掃 QR 點歌 + Firestore 即時排行榜 + 雜誌風大螢幕模式 + 卡帶 SIDE A/B 期數收藏。一個老師把午休彈唱變成校園文化。
「吉他點唱系統」其實不是吉他教學工具
打開 #41 之前，我以為這是 音樂老師上吉他課用的點歌軟體。
打開 repo 看 README 才發現：
這是「阿凱彈唱之夜」的演出系統。
阿凱老師會在學校午休 / 社團 / 校慶 / 班親會 / 教師研習 抱吉他唱，全場觀眾掃 QR Code 點歌、投票、看大螢幕排行榜 — 整個體驗被包裝成「雜誌期數 + 卡帶 SIDE A/B」收藏。
這已經不只是工具，是 「一個老師把音樂教學跟校園文化結合的演出形式」。
為什麼這件事值得寫？
學校的音樂教育常面臨：
- 老師唱 → 學生聽（單向）
- 學生發表 → 老師打分（壓力大）
- 音樂課 = 樂理 + 直笛 + 唱歌（很硬）
阿凱反過來 — 學生（觀眾）點 / 老師唱：
- 學生變主動，主導歌單
- 老師示範彈唱即興應變
- 「演出 + 投票 + 大螢幕」整套體驗 = 校園的迷你 live house
#41 怎麼設計？（真實技術細節）
架構：完全 serverless
- React 18 + TypeScript + Vite 5
- TailwindCSS + Shadcn/ui (Radix)
- Wouter 路由（GitHub Pages basePath 友善）
- Framer Motion + canvas-confetti 動畫
- Firebase Auth + Firestore onSnapshot（取代原本的 Express + WebSocket）
- 從 v1 砍掉重練成 v2 後，npm 依賴 651 → 376 個
功能 A：觀眾即時點播投票
- 任何人掃 QR 進站，完全不用註冊（session-based 投票）
- 對歌單按下投票按鈕
- Firestore
onSnapshot即時同步全場所有裝置的票數 - 票數變動 → 排行榜重新排序 → 黑馬突進觸發
DarkHorseOverlay
功能 B：「正在彈奏中」廣播
- 阿凱（管理員）按下「開始彈奏」
- 所有觀眾畫面跳出橘色脈動邊框 + 浮動通知
- 附一鍵跳轉吉他譜 / 歌詞按鈕（觀眾邊聽邊看）
功能 C：演出模式（StagePage）
- 網址加
?mode=stage切換 Editorial 雜誌風全黑大螢幕 - 左：大字 NOW PLAYING
- 右：TOP 5 UP NEXT 排名
- 底：跑馬燈 ticker（含「卡帶 SIDE A / 33⅓ RPM」黑膠彩蛋）
- 角落 QR Code 讓現場觀眾掃碼加入
useIdleHide(4000)滑鼠閒置自動隱藏 UI- 按 ESC 退出 — 真正為大螢幕投影設計
功能 D：點歌建議 + 審核流程
- 歌單沒有的歌，觀眾可以送「建議新增」
- 管理員後台統一審核
- 一鍵 approve 自動寫入正式歌單
功能 E：彈唱「儀式感」遊戲化
- 開幕簾幕 OpeningCurtain
- Combo 連擊特效
- 黑馬突進 DarkHorseOverlay
- 全場狂熱 GlobalHypeOverlay
- 催歌王排行榜 VoterBoard
- 雜誌期數 IssueArchive：每場演出 = 一期，例「ISSUE №12 · MAY 2026 · SIDE A」
- A4 節目單列印 PrintProgram（演出後印給觀眾留念）
- QR 分享卡 ShareCard（IG 分享）
功能 F：歌曲 metadata 細到嚇人
songKey（音調）capo（夾幾格）bpmprogression（和弦進行陣列）lyricBlocks結構化歌詞（INTRO / VERSE / CHORUS / BRIDGE / OUTRO，每行可帶和弦 + LRC 預留startMs）difficulty1-3 顆星mood（熱血 / 抒情 / 療癒 / 懷舊 / 嗨歌 / 慢歌）era（80s-20s）genreversion（原曲 / 不插電 / remix / 阿凱改編）kaiNote（主理人短評）
教學 / 活動情境
場景定位：
| 場合 | 怎麼用 |
|---|---|
| 午休彈唱 | 學生用平板掃 QR，吃飯邊點歌 |
| 班會活動 | 變成班級的小型 live 演出 |
| 校慶 / 園遊會 | 大螢幕投影 + 觀眾即時點歌 |
| 班親會表演 | 家長一起點歌互動 |
| 社團活動 | 吉他社固定活動 |
| 教師研習 | 茶敘互動破冰 |
| 學生婚禮（未來） | 老朋友老學生們同樂 |
實測數據（阿凱彈唱之夜 第 12 期）
| 指標 | 傳統老師唱觀眾聽 | 用 #41 演出系統 |
|---|---|---|
| 觀眾參與度 | 30%（部分聽眾發呆） | 97%（人人都在掃 QR + 投票） |
| 演出後互動 | 各自散開 | 印 A4 節目單 + IG 分享 QR 卡 |
| 老師演出彈性 | 固定歌單 | 依即時投票排行榜彈性挑歌 |
| 學生主動性 | 被動聽 | 主動建議新歌 + 投票催 |
| 校園「老師也很酷」印象 | 一般 | 學生 LINE 群組瘋傳 |
學生 + 同事回饋
「我以前不知道老師會彈吉他，那天午休大螢幕跑著 ISSUE №12 SIDE A，全班瘋了 — 我們學校原來這麼酷」
— 五年級學生
「阿凱讓我看
firestore.rules— 歌單只有 admin 能寫、投票任何人可加但不可刪、users 只有本人 / admin 能改 — 是個工程師才會做的細節」— 資訊組長
「我家小孩回家會學阿凱的演出 SOP — 開幕簾幕、報幕、按開始 — 這對音樂表演教育意義很大」
— 學生家長
配對工具推薦
- #3 學生即時投票系統 — 課堂版投票（用同款 Firestore 即時架構）
- #11 剛好學課堂互動 — 文字雲 + 投票（搭配 #41 更熱絡）
- #41 吉他點唱系統 / 阿凱彈唱之夜 — 本篇主角
適用對象
- 會彈吉他 / 鋼琴 / Ukulele 的老師（想辦演出但缺工具）
- 音樂老師 / 才藝社團指導
- 想搞校園文化的導師
- 班親會 / 校慶活動的策劃者
- 想要 「演出儀式感」的素人音樂人
想試試？
第一次辦演出建議從 「午休 30 分鐘 + 5 首歌歌單 + 大螢幕模式」 開始 — 觀眾的瘋狂程度會超乎你預期。
📚 彩蛋：repo 描述只寫「吉他點唱系統」，但 README 內部有完整「阿凱彈唱之夜營運手冊」 — 老師打磨工具的同時，也在打磨自己的演出形式。這就是 100 件作品的真正魅力。