关于我用WorkBuddy 做波形播放器

说实话，我到现在都没完全搞明白 FFT 到底是什么意思。但这不妨碍我做出一个能跑的波形生成应用。

这事得从三个月前说起。我当时想做一个音乐播放器，不是那种普通的列表播放器，而是能随着音乐**实时显示波形和频谱**的那种。打开一搜教程，满屏的“AnalyserNode”“Web Audio API”“快速傅里叶变换”，直接把我劝退了。我连 JavaScript 的数组方法都得现查，更别说这些音频处理的底层概念了。

后来朋友跟我说，你试试 WorkBuddy 吧，那东西能帮你干活。我当时的反应是：又一个“帮你写代码”的 AI 呗，之前试过几个，生成的代码跑不起来，报错也看不懂，最后还是得自己啃。

但这次不太一样。

第一句话，它给了我一个能跑的东西

我打开 WorkBuddy，说的第一句话很含糊：“帮我做一个音乐播放器，要能显示波形的那种。”

没有指定技术栈，没有说用哪个库，甚至连界面长什么样都没想好。心里想的是，估计它会给我一段代码，然后我复制粘贴发现跑不了，再回来问它怎么改。

结果它直接生成了一个完整的 HTML 文件。打开浏览器，一个**黑胶唱片在转，背景是星空，底部有一条跳动的光带**。虽然还没加载音乐，但整个框架已经立起来了。

我当时愣了一下。因为正常情况下，一个不懂编程的人要做这件事，得先学 Canvas 怎么画图，再学 CSS 怎么做动画，再学 Web Audio API 怎么分析频谱。WorkBuddy 把这些全跳过了，它自己选了 Canvas 渲染星空、CSS 动画驱动唱片旋转、AnalyserNode 采集频谱数据。

我不需要知道这些技术叫什么，它把“你负责说方向，它负责填细节”这件事做到了。

踩坑才是真实的使用体验

当然，事情没有那么顺利。

第一个大坑出现在播放环节。我把桌面“老歌”文件夹里的 111 首歌指给它，让它批量加进去。它自动读取了所有 MP3 文件，解析文件名拆分出歌名和歌手，为每首歌生成了独立的配色方案，然后全部渲染进了播放列表。

点播放，**没声音**。

我当时心里一沉，果然还是出问题了。但 WorkBuddy 没有等我描述问题，它自己去排查了，然后告诉我原因：播放器用了 Web Audio API 做频谱可视化，这个 API 有个副作用，会把音频元素标记为“跨域受污染”，在 `file://` 协议下直接打开 HTML 时会导致音频被静音。

修复方案是：检测当前协议，如果是 `file://` 就跳过可视化模块，让音频走原生播放；只有在 `http(s)` 环境下才启用完整可视化。

这个 bug 如果让我自己查，我可能三天都找不到原因。因为报错信息根本不会告诉你“跨域受污染”这几个字，它只会在控制台里默默静音。但 WorkBuddy 知道这个坑在哪，因为它见过足够多的真实案例。

波形功能是怎么“长出来”的

回到波形这件事本身。

我最初说的“显示波形”其实很模糊。是静态的波形图？还是随音乐跳动的频谱？我自己都没想清楚。

WorkBuddy 选了后者。它用 Web Audio API 的 **AnalyserNode** 实时采集音频数据，把频域信息画成环形光带。切歌的时候，光带会重新适配新歌的节奏和频率分布。

我后来查了一下，AnalyserNode 做的事情本质上是**快速傅里叶变换（FFT）**，把时间域的音频信号拆解成不同频率分量的强度。这些名词我到现在也记不太住，但我知道它工作的效果：音乐低音重的时候，环形光带的内圈会变粗；高音多的时候，外圈会向外扩散。

这就是 WorkBuddy 有意思的地方。**它把“傅里叶变换”这种吓人的概念，变成了一个视觉上能感受到的东西**。我不需要理解原理，我只需要看到它好不好看、跟不跟节奏。

一些不太满意的地方

说点实话，用 WorkBuddy 做东西也不是完全没有槽点。

有时候它太“聪明”了，会做很多我没要求的事情。比如我说“加个音效选项”，它直接给我上了 **12 种预设均衡器 + 6 种环境混响 + 5 段 3D 环绕声像**。我本来只想加一个“低音增强”按钮，结果它给了我一个完整的音频处理面板。

这算是好事还是坏事，我也说不清楚。好处是我不用再提需求了，坏处是界面上东西太多，我自己都看不完。

另外，虽然它**能处理 111 首歌的批量导入和自动解析**，但每次改动之后，它不会自动帮你测试所有功能是否正常。有一次我改了一个配色，结果播放按钮的样式出了问题，它没有发现，是我自己点了一下才知道的。所以“验收”这件事，还是得自己来。

写在最后

我现在这个播放器，已经可以在公网上访问了。111 首老歌躺在里面，每首歌都有自己的波形和配色。虽然代码我基本看不懂，但**成品是我要的那个东西**。

有人可能会说，这不就是“AI 帮你写代码”吗。但我的感受不太一样。它更像是一个**知道怎么把想法变成现实的人**，而你只需要告诉它你想要什么。

我不需要学 FFT，不需要学 Canvas，不需要学 CSS 动画。我需要做的是：说清楚我要什么，判断它做出来的东西对不对，然后让它继续改。

这三个月下来，我最大的收获不是“学会了做波形播放器”。而是意识到了一件事：**很多事情的入门门槛，其实不是能力，是耐心**。你得有耐心去啃那些看不懂的文档，有耐心去调那些不知道为什么会报的错。WorkBuddy 把这份耐心替我出了。

所以如果你也想做个什么东西，但被“我不会编程”卡住了，我的建议是：先说出来。剩下的，让它去试。