PhraseLoop

乐手的片段练习本。上传 PDF 或图片乐谱和伴奏，圈出想练的小节或乐句，按 BPM/拍号映射到时间，并带间隔循环播放难点片段。适合鼓、吉他、贝斯、钢琴、弦乐、管乐等需要反复练习局部乐句的场景。

运行

npm install
npm run dev

打开 http://localhost:3000。

已实现

• 曲目库：首页展示本地曲目、BPM、拍号、片段数、练习次数和删除入口
• 新建向导：拖拽或点击上传 PDF/图片乐谱、上传音频/视频伴奏、填写曲名/BPM/拍号
• IndexedDB：曲目信息、乐谱 Blob、伴奏 Blob 全部保存在浏览器本地
• 曲目详情：整首练习、片段练习两种模式
• 乐谱渲染：pdf.js Canvas 渲染 PDF，图片直接绘制到 Canvas，支持裁剪、旋转、锐化开关
• 小节定位：优先像素检测 staff/barline，失败时自动使用平均网格
• 片段练习：点击小节格子、保存片段、编辑片段、删除片段、跳过未选小节并带间隔循环播放
• 播放器：播放/暂停、前后 5 秒、进度条、当前小节高亮和蓝色播放头

主要文件

• app/page.tsx：曲目库
• app/new/page.tsx：新建曲目向导
• app/song/[id]/page.tsx：曲目详情和练习控制
• components/PdfCanvas.tsx：PDF/图片乐谱渲染、小节格子、当前小节高亮
• lib/db.ts：IndexedDB 封装
• lib/timing.ts：小节和时间换算
• lib/staff-detect.ts：五线谱和小节线检测