🥁 #64 簡譜節拍師 v2.6 Rhythm Beat Master：太鼓達人風格 × Web Audio API 即時合成 × 7 鍵 Do Re Mi × 4 段難度

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

#64「🎵 簡譜節拍師 v2.6 — Rhythm Beat Master」是阿凱寫的**太鼓達人風格 × 簡譜節奏遊戲**。7 個按鍵（1-7 對應 Do Re Mi Fa Sol La Si）+ 三種判定（PERFECT 金 / GOOD 綠 / MISS 紅）+ COMBO 連擊 + Web Audio API 即時合成背景旋律 + 4 段難度（初學 / 一般 / 高手 / 地獄）+ LocalStorage 每首每難度獨立紀錄。

音樂課「簡譜節奏訓練」的真實痛點

音樂課常見內容：

• 直笛 / 烏克麗麗 / 鋼琴 / 簡譜學習
• 老師最痛的不是學生不會吹/彈，是「抓不到節奏」

傳統做法：

• ❌ 拍手節奏：太抽象、無視覺
• ❌ 節拍器：聽得到但看不到
• ❌ 老師打節拍：學生看老師沒看譜
• ❌ 商業音樂 APP：太鼓達人很經典但沒有簡譜版

阿凱的 #64 簡譜節拍師 反向：太鼓達人 × 簡譜 = 7 鍵 Do Re Mi 節奏遊戲。

#64 真實怎麼做？

真實標題：「🎵 簡譜節拍師 v2.6 — Rhythm Beat Master」

副標：「太鼓達人風格 × 簡譜節奏遊戲 × Web Audio API」

🎮 核心玩法：

• 7 個按鍵：1～7 對應 Do Re Mi Fa Sol La Si
• 音符從右往左捲動
• 在「判定線」（菱形光柱）按下對應數字鍵
• 三種判定：
  • PERFECT（金色）⭐
  • GOOD（綠色）✅
  • MISS（紅色）❌
• COMBO 連擊統計

🌟 五大高優先功能（v2.0 新增）：

🎨 v2.6 全新改版：UI/UX 視覺升級。

為什麼用 Web Audio API 合成而不是放 mp3？

阿凱的設計選擇：

• ✅ 載入快（沒有 mp3 檔要載）
• ✅ 單檔即用（不依賴外部資源）
• ✅ 可程式控制音高 / 時長（隨難度調整）
• ✅ 跟倒數計時同步啟動（精確 0 延遲）
• ✅ iOS Safari 也能跑（需要 user gesture 後 resume）

跟 #33 讓聲音具現化吧 / #26 九九乘法大冒險 同款選擇：用對工具是工程師的修養（多次驗證）。

真實技術棧

• 純前端（無 React/Vue 框架）
• ES Module 架構（game.js / input.js / index.js 拆分）
• Web Audio API（背景旋律 + 音效合成）
• Canvas / DOM（音符捲動 + 判定線）
• LocalStorage 進度與最高分
• 部署：cagoooo.github.io/music/

跟其他遊戲的「漸進式工具家族」

「Web Audio API 三件套」案例 — 阿凱對音訊處理的偏好。

教學情境

音樂課「節奏訓練」單元：

• 第 1 節：講 Do Re Mi 1234567 對應 + 學生玩「初學」模式
• 第 2 節：升「一般」難度
• 第 3 節：「高手」級挑戰
• 第 4 節：「地獄」級高手 PK

直笛課暖身：

• 上直笛課前 10 分鐘 → 學生玩 #64
• 建立 1234567 鍵盤反應
• 接著直笛吹起來更順

社團活動：

• 音樂社 / 直笛社 / 烏克麗麗社
• 自由時間玩 #64 + 看誰連擊最高

家庭親子：

• 假日家長陪小孩玩
• 「昨天連擊 50，今天破紀錄」變家庭遊戲

配對工具推薦

• #41 吉他點唱系統「阿凱彈唱之夜」 — 同款音樂主題
• #50 童樂學園的節奏達人 — 同款節奏遊戲（簡單版）
• #33 讓聲音具現化吧 — 聲音視覺化

適用對象

• 國中小音樂課老師
• 直笛 / 烏克麗麗 / 鋼琴指導老師
• 音樂社團指導
• 想看「Web Audio API + 太鼓達人」案例的開發者
• 想做「節奏訓練 web app」的工程師

想試試？

→ 前往 #64 簡譜節拍節奏大師

打開 → 選「初學」模式 → 跟著音符按 1234567 → 看 PERFECT 金光連擊 → 這比商業節奏遊戲免費 + 中文友善。