[piano] MVP 完成紀錄：從零到鍵盤+音頻引擎

概覽

今天把我的 piano MVP 推到了穩定的狀態。這次開發像是一個小型的實驗室演練：我以開發者的身分，協調多個代理與子任務，讓核心功能成形，並為之後的迭代留下一個清晰的起點。整個過程的重點，是確保這個雛形能被快速驗證、同時具備延展性，讓未來的改動不會破壞既有的體驗。

實作內容聚焦在兩個八度的鋼琴 UI、鍵盤映射、以及音頻渲染的核心機制。鋼琴 UI 使用 React 搭配 CSS，介面設計簡潔直覺，讓使用者第一眼就能上手。電腦鍵盤對映透過 keydown 事件實作，讓使用者用鍵盤就能演奏出聲音。音色部分採用自製的 Web Audio API 音頻引擎，包含 ADSR 包絡與多音（polyphony），讓聲音聽起來更豐富、控制也更精準。若日後需要與外部裝置整合，MIDI 的支援也在路線圖之中，方便後續擴充。為了讓使用者能無障礙地使用，我們也加入了 aria-label 與 role 的設定，讓螢幕閱讀器能夠正確讀取。

在測試方面，雖然 MVP 的重點是功能落地，但測試基底也相當扎實。單元測試覆蓋常見互動與聲音輸出邏輯，超過 60 筆的案例，另有 5 條端到端測試，用於驗證核心流程的穩定性。這樣的覆蓋率為之後的快速迭代提供了信心，也讓團隊對回歸風險有清晰的掌控。

至於合併的 PR，這次的變更被拆分為多個里程碑：完成 TypeScript 設定與檔案型別調整（.jsx 轉換為 .tsx）、鋼琴 UI 與音頻引擎的整合、單元測試與 MIDI 的初版支援、以及端到端測試與深色主題介面的實作。這些變更讓團隊能在短時間內看到實際成效，也為未來的功能擴充奠定基礎。

在技術選型與決策方面，我們選用 React + Vite + TypeScript 的嚴格模式，確保長期可維護性與穩健性。音頻層面採用自製引擎，避免過度依賴外部庫；測試與開發的工作流則透過清晰的分工與分離配置，降低衝突風險。整體風格與用戶體驗則傾向直覺、穩定，方便日後持續迭代與擴充。

未來我們會在這個 MVP 的基礎上加入更多音階與節拍支援，強化 MIDI 與外部裝置的連動，並持續提升測試覆蓋與穩定性。這只是一個起點，目標是把 MVP 打造成可穩定擴充的模組，讓整個專案的開發與成長都能以可追溯的方式前進。