【Code With SOLO】用 SOLO 解锁半岛铁盒
成果地址：https://corvusye.github.io/stylophone/
代码仓库： GitHub - CorvusYe/stylophone: 这是一个基于Web的Stylophone（半岛铁盒）应用，具有真实的音效和交互体验。 · GitHub
欢迎在评论区带上你的旋律，也可以逛逛才艺展示区。
有兴趣的朋友可以搜索小程序：【Stylophone有谱】，里面真的有谱。一起来玩。
摘要
使用Web版的SOLO 从零开发了一款高保真的 Stylophone S1 网页虚拟乐器，完整复刻了实体乐器的键盘布局、触控笔交互、音色合成与效果控制。整个项目为纯前端单 HTML 文件，基于 Web Audio API 实现经典方波音色，Canvas 绘制仿真键盘，支持鼠标、触屏和键盘快捷键三种操控方式。原本可能完全写不动的前端音频交互项目，借助 SOLO 在 3-4 小时内完成，大幅降低了开发门槛。
背景
我是一名独立开发者，有一天刷到个视频说原来半岛铁盒是个乐器，没见过世面的我很是吃惊，而且看着像是个很容易上手的乐器，就想能不能做一个，但迟迟没有动手。这次刚好借助 TRAE SOLO，尝试用 AI 让不知道能不能的事变成现实。
实践过程
1. 任务拆解
在当前应用的开发过程中，没有技巧，都是人话，因为我也不知道能碰到什么问题。
做一件事情最难的往往是第一步，所以第一步先有界面。然后再慢慢调。
这部分就当开发过程总结了：
- 先有界面
- 调整总体界面
- 调整琴键布局
- 触控笔的交互效果（分左右惯用手不同的视觉效果）
- 琴键发出的声音（我把琴键图给了DeepSeek，让DeepSeek出对准声音的提示词）
- 追加关于调音的功能，如：低、中、高音的按钮、移音旋钮、颤音开关、延音开关
- …
主要内容差不多就这些，更多调整的细节详见：迭代过程，提交消息就是所用提示词。
2. 使用的 SOLO 能力
- 代码生成：直接生成完整的 HTML/CSS/JavaScript 单文件应用
- 多轮迭代调试：针对音频合成参数、键盘布局精度、触控笔角度计算等进行多轮优化
- 技术选型建议：SOLO 推荐使用 Web Audio API + Canvas 的组合方案，避免了引入额外依赖
- Bug 修复：快速定位并修复了琴键布局、触控笔角度翻转、琴键碰撞检测优先级等问题
- web-artisan：我也不知道是干啥的，总之用到了。有些好东西总是随风潜入夜，润物细无声的。
3. 关键 Prompt 示例
大部分提示都平平无奇。从迈出第一步到效果发生质变的是一条上传了图片的提示词：
另外，过程中有个沟通比较久的问题是键盘布局，虽然类似的键盘图上传过了，但并没有太大效果，最后是使用坐标来描述的：
再调整一下布局：
参考图是底下那排是从0-11的线
上面那排是 0.5-1.5， 2.5-3.5， 3.5-4.5，5.5-6.5，6.5-7.5，7.5-8.5，9.5-10.5，10.5-11.5
音调需要作出相应调整
4. 踩过的坑
总体来说还是比较顺利的，要说有坑设是小坑。在【左右手触控笔跟随】的功能中，有一条提示词实际发出去，但网页上没显示（后来显示出来了），我又发了一遍。不知道是不是屏幕坐标系跟自然坐标系的差异，SOLO 做出来的效果顺时针偏了90°，我的提示词是：再逆时针旋转90度吧。（发了两次，只能再纠正回来一次）
成果展示
功能特性
仿真键盘：Canvas 绘制的 20 键仿真 Stylophone 键盘，还原真实乐器的键位布局
经典方波音色：基于 Web Audio API 的方波振荡器，复刻 Stylophone 标志性音色
虚拟触控笔：跟随鼠标/手指的虚拟触控笔，支持左右手切换，模拟真实演奏体验
移调旋钮：无极旋转的移调控制，支持任意半音移调
效果控制：颤音（Vibrato）和延音（Sustain）一键切换
多端适配：同时支持鼠标、触屏和键盘快捷键操作
快捷键：Z/X/C 切换八度，V 切换颤音，S 切换延音
技术栈
- 纯前端单 HTML 文件，零依赖
- Web Audio API（音频合成）
- Canvas 2D（键盘绘制与动画）
- 原生 JavaScript（无框架）
项目链接
效果与总结
提效成果
如果没有SOLO的出现，我可能不会自己真的动手做一个这样的网页版乐器，毕竟我一个搞数据的，对网页的声音API、网页画布这些内容几乎没用过，自己动脑学、动手写属实困难，说自己是这方面的编程小白都不为过。这应该就不属于提效的问题，是将不可能变成可能，并且变成了现实
SOLO 在流程中的角色
与其说 SOLO 在流程中充当什么角色，不如说我只充当了半个产品设计准确来说就是搜张图+测试的角色，其他的事都是SOLO这个新时代程序员干的。
可复用的方法
- 先开干，先出效果，再调整。
- 在沟通上，尽可能使用难以产生歧义的表达方式，比如说术语、坐标、具有有唯一性的样式类进行明确指向。
- 在通用术语以外，尽快与 AI 达成共识，不仅限于使用图片、Mermaid这种可以承载丰富明确信息的形式。
思考
这次实践让我深刻体会到，AI 编程工具最大的价值不在于替代开发者，而在于大幅降低跨领域项目的启动成本。作为一个对音频编程不太熟悉的开发者，SOLO 帮我快速跨越了 Web Audio API 的学习曲线，让我能把精力集中在创意和产品体验上。这种"AI 写代码、人来把关"的协作模式，特别适合独立开发者和创意项目的快速原型验证。