移动用户注意： 由于我想大部分用户都在使用手机浏览器看这个页面，我想提醒大家，这个应用在台式机或笔记本上体验更佳！目前，-mobile 浏览器仍然不支持系统音频捕获。虽然通过手机浏览器可以使用麦克风捕捉ambient声音或本地文件，但直接在电脑上启动可以让您轻松地从Spotify、YouTube或其他播放音乐的应用程序中捕捉音频。

两周前，在看旧学校的昔日日志时，通过对Winamp的可视化在电视上与朋友们在妈妈的地下室观看，突然间涌现了深深的怀旧感。但是由于我不再下载音乐，而妈妈也不再允许我进入她的地下室，所以我想要在浏览器中直接重现那个年代而不需要本地媒体。

最近两个星期，我开发了MangoWave。它完全免费并开源。没有广告，没有登录页，也不要求下载。

一些背后我自豪的工程：

  • 音频管道：核心引擎完全在客户端。它连接了Web Audio API来处理本地文件、麦克风输入 或系统音频捕捉。
  • 可视效果：渲染是由butterchurn，一个WebGL 2 MilkDrop 端口，推出了超过400个预置设置。将音频管道中的实时FFT数据传递给着色器渲染器而无需丢帧，这是一个 मज的挑战。 我也花了很多时间来增加尽可能多的自定义设置，让用户可以根据硬件限制来调整自己的体验。
  • 后端： 虽然可视化程序在浏览器中本地运行，但是我建立了一个完整的AWS后端（Lambda，API Gateway，DynamoDB，CloudFront）来支持跨设备设置同步和可选Spotify OAuth。一月前，Spotify限制了API，并且限制了用户模式下的Spotify集成。然而，具体教程已包含在GitHub中，指明要自行部署并获取您的Spotify开发者凭证。
  • 管道与附加内容：整个项目是一个 NPM workspaces单级包，其中包含 9 语言的国际化。 CI/CD 是完全自动化的，使用GitHub Actions 运行单元测试和 Playwright E2E检查，跨5种不同的浏览器部署之后。

链接：

我很享受我可以在不下载音乐的情况下看到这些可视化了。希望大家也喜欢，任何反馈都欢迎通过Reddit 或GitHub！