Piano Scope 是一個專為鋼琴設計的 MIDI 樂譜視覺化工具。簡單來說，它能讓你把一個 .mid 檔案丟進瀏覽器，它就幫你把它「翻譯」成一張像音樂出版物一樣專業的五線譜，並且可以同步播放聲音。
這類工具最大的挑戰在於 MIDI 檔案本身只包含音高、時值和強度，並不包含「如何排版」的資訊。Piano Scope 解決的問題就是如何將這些原始數據，轉換為符合音樂理論的視覺符號（例如：什麼時候該用八分音符、符桿該朝上還是朝下、如何標記延音踏板）。
核心運作邏輯
該工具的運作流程像是一條生產線，將原始數據逐步精煉為視覺圖像：
首先，解析層利用 Tonejs/midi 讀取檔案，提取音符與控制事件（如 CC 64 踏板訊號）。
接著進入量化與分配階段。因為 MIDI 記錄的時間非常精確，直接繪製會導致音符位置偏移，因此它將音符強制對齊到 16 分音符的格線（量化）。同時，它會根據音高將音符分配到高音譜表或低音譜表（大譜表），並根據音軌編號分配聲部（Voice）。
然後是邏輯合併。同一時間點的音符會被合併為和弦；而連續的短音符則會根據斜率限制被連接成 Beam（符桿連線）。
最後是渲染層。它使用 HTML5 Canvas 繪製，為了避免字體缺失導致的譜號亂碼，它直接使用 Path2D 向量路徑來繪製高低音譜號與休止符，確保在任何裝置上看起來都一致。
技術亮點
專業的刻印細節：它實作了許多音樂出版細節，例如最後一小節的雙線終止線、根據 Velocity 自動產生的強弱記號（pp 到 ff），以及對延音踏板線的自動合併處理。
高效能渲染：採用雙緩衝技術（Offscreen Canvas），先在後台畫好再同步到螢幕，避免播放時游標移動產生閃爍。
零部署成本：整個專案不使用 npm 或 Webpack 等建置工具，所有相依套件透過 CDN 載入，使用者直接開啟 index.html 即可運行。
適合誰使用
這是一個非常適合音樂教學 App 開發者、MIDI 編輯工具開發者，或是想要研究如何將時間軸數據轉換為空間排版（Timeline to Layout）的工程師參考的專案。
導入成本與風險
導入成本極低，因為它幾乎沒有環境依賴。但若要將其整合進大型專案，需要注意以下風險：
效能瓶頸：目前的渲染邏輯在處理極其密集、音符量巨大的 MIDI 檔案時，Canvas 的重繪壓力會增加，可能會出現掉幀現象。
量化誤差：由於採用固定格線量化，對於非標準節拍或具有大量自由揉奏（Rubato）的 MIDI 檔案，渲染出的樂譜可能會與實際聽感有微小偏差。
成熟度判斷
該專案目前屬於一個功能完整的技術展示型工具（Technical Demo）。它在單一功能的深度（記譜刻印）上做得非常紮實，但在通用性（例如支援非鋼琴樂器、支援更多 MIDI 標準）上尚有擴展空間。它不是一個商業級的樂譜編輯器，但作為一個 MIDI 視覺化播放器，其技術實作已達到相當高的完成度。