【免费下载链接】slopsmith
Self-hosted Docker web app for browsing, playing & practicing interactive full-band music notation, with an extensive plugin system
Slopsmith 是一款自托管的 Docker 网页应用,用于浏览、播放和练习整支乐队(吉他、贝斯、键盘、鼓、人声)的交互式乐谱,其中核心的 Note Highway 播放器把乐谱渲染成滚动的音符公路。它内置3D Highway与Classic 2D Highway双引擎视觉,支持和弦括号(chord brackets)、12 种吉他技巧标注(推弦、滑音、击弦、泛音等)、同步歌词与 A-B 循环练习,本文带你一次看懂这套练习视觉系统。
一、打开播放器:从曲库进入 Note Highway
先在曲库中点一首歌即可进入播放器。曲库支持网格视图、艺术家/专辑树形浏览、搜索与调弦筛选,每首歌的卡片上都标有 Lead / Rhythm / Bass 编曲徽标和调弦信息,方便你按自己的水平挑选编曲。
曲库相关实现见 static/app.js 与 static/capabilities/library.js。
二、3D Highway:有透视感的"舞台"视觉引擎
3D Highway 是 Slopsmith内置的可视化插件(无需单独安装),在玩家界面的可视化选择器(viz picker)中可直接切换。它模拟舞台视角:音符从画面深处向你脚下的虚拟指板飞来,带深度感知相机、灯光和逐弦轨道辉光。
3D 模式的核心体验:
- 透视指板:底部品格数字(如 1-15)加热彩色显示,亮起你正在演奏的区域
- 发光琴弦:每次命中时对应琴弦脉冲增亮
- 和弦框:检测到和弦时出现框体与和弦名标签,并叠加和弦图(chord diagram)角标
- 横按指示:识别到横按和弦形状时,公路上会出现半透明竖线,和弦图内同时画出横括号
- 音高检测反馈:搭配 Note Detection 插件可显示命中/失误轮廓与 early/late 诊断标签
3D 的视觉设置(背景样式、强度、音频响应、调色板)都在Settings → 3D Highway分区调整,源码在 plugins/highway_3d/screen.js,更多说明见 plugins/highway_3d/README.md。
三、Classic 2D Highway:低配设备也能流畅跑
如果你用的是低性能设备,可在同一个选择器里切到Classic 2D Highway。2D 公路采用 Canvas 2D 渲染,斜向视角的品格轨道上分布着带品位的彩色音符块,支持 HD 模式与动态锚点缩放——指板范围会平滑地"预判"即将到来的音符并自动调整。
2D 引擎的核心渲染逻辑在 static/highway.js,包括音符宝石绘制、技巧标签、延迟尾迹等全部细节。
四、和弦括号(Chord Brackets):一眼读懂和弦
在 Note Highway 中,同时响起的多个音会被"和弦括号"连接起来,并标注和弦名(如 Bm、G5):
- 括号连线:把属于同一个和弦的音符串起来,避免逐音记忆
- 和弦名标签:直接显示在括号上方
- 空弦横条:品位为 0 的音符显示为横跨公路的宽条并标 "0"
- 延音尾迹(sustain tails):音符保持可见直到延音结束,让你看清"按多久"
2D 和 3D 引擎都完整支持这些元素,3D 版还叠加了指法图角标与横按括号提示。
五、12 种吉他技巧标注速查表 🎸
Slopsmith 的音符渲染完整覆盖常用吉他技巧,对照下表看公路上的标记即可"解码"任何一段演奏:
| # | 技巧 | 视觉标记 |
|---|---|---|
| 1 | 推弦 Bends | 弯曲箭头 + 力度标签(½ / full / 1½ / 2) |
| 2 | 同步推弦 Unison Bend | 虚线连接符 + "U" 标签 |
| 3 | 滑音 Slides | 斜向箭头 |
| 4 | 击弦 Hammer-on | "H" 标签 |
| 5 | 勾弦 Pull-off | "P" 标签 |
| 6 | 点弦 Tap | "T" 标签 |
| 7 | 手掌护弦 Palm Mute | "PM" 标签 |
| 8 | 颤音 Vibrato | 动态发光的延音 |
| 9 | Tremolo 颤音 | 波浪线 |
| 10 | 重音 Accent | ">" 三角标记 |
| 11 | 泛音 Harmonics | 菱形(diamond)形状 |
| 12 | 捏泛音 Pinch Harmonics | 菱形 + "PH" 标签 |
六根琴弦使用固定配色(红、橙、蓝、橙、绿、紫),技巧标签会自动避开音符主体摆放,空弦音符上的 PM、H/P/T、波浪线与重音标记同样有效。这些渲染逻辑集中在 static/highway.js 的音符绘制函数中。
六、播放器内置的辅助与练习功能
同步歌词:基于乐句的多行歌词显示,卡拉 OK 式高亮当前词,可随时开关(3D 界面顶部的歌词即此功能)。
速度控制:0.25x–1.50x 连续滑杆,配合音量控制,方便放慢练习。
编曲切换:播放中可实时在 Lead、Rhythm、Bass 之间切换,默认编曲可在 Settings 中设置。
A-B 循环练习🎯:
- 设 A、B 两点循环指定段落,回到起点时公路会平滑"倒带"
- 支持命名并保存多个循环(Saved Loops),跨会话保留
- 4-Count Click:每次循环前播放与速度匹配的 1-2-3-4 节拍器倒数
七、相关模块与文档
- 2D 公路渲染:static/highway.js
- 3D Highway 插件(内置):plugins/highway_3d/,含 screen.js、routes.py 与 CLAUDE.md(视觉元素与代码位置对照指南)
- 播放能力前端:static/capabilities/playback.js
- 音符检测基准测试:docs/benchmarks/
想进一步提升练习体验,可以搭配 Note Detection(实时音高检测与评分)、Fretboard View(实时指板叠加层)等插件——它们都以文件夹形式放入plugins/目录即可自动发现,整个插件系统让这套 Note Highway 播放器几乎可以无限扩展。
【免费下载链接】slopsmith
Self-hosted Docker web app for browsing, playing & practicing interactive full-band music notation, with an extensive plugin system
相关推荐
Windows窗口的像素芭蕾:用系统原生API演绎Bad Apple的艺术
Windows窗口的像素芭蕾:用系统原生API演绎Bad Apple的艺术 当桌面上的窗口不再是静态的工作空间,而是随着音乐节奏翩翩起舞的像素点,你会看到什么?
探索SVGuitar:JavaScript的吉他和弦渲染库
探索SVGuitar:JavaScript的吉他和弦渲染库 SVGuitar是一款强大的JavaScript(TypeScript)库,专用于在浏览器中生成精美
3 天把 1.7TB DROID 数据集迁入 LeRobot v3.0:单机到 SLURM 分片迁移
3 天把 1.7TB DROID 数据集迁入 LeRobot v3.0:单机到 SLURM 分片迁移 这篇文章讲清楚 LeRobot 数据集迁移的完整链路:Le
人工智能机器学习深度学习机器人具身智能强化学习
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考