移动设备用户请注意：由于你们大多数人是在使用手机阅读这篇文章，因此我要提醒你们，这个应用的最佳体验是在台式机或笔记本电脑上！移动浏览器还不支持系统音频捕捉。虽然在手机上使用麦克风或局域文件很棒，但在计算机上跑起这个应用，你就可以直接从Spotify、YouTube或任何其他选项卡/窗口/应用中捕捉音频。

大家好！我的小伙伴们！我前几天就发布了应用的第一版，社区给我的反馈都是非常棒的。在过去的48小时内，我在这其中的建议下又添加了自定义预设包支持和多窗口同步功能！

为了有个背景，我在MangoWave之前是因为回忆起了在初中的那段时间看着Winamp的视觉化在电视上与朋友们观看在我妈妈的地下室，非常怀旧。然而，我现在不下载音乐了，而我妈妈也还没允许我再去地下室，所以我想把这把过去直接在浏览器里体验而不用local media。

这完全是免费且开源的，并且没有广告，没有注册表单，也没有下载。

作为一个自行开发者，我很自豪地在内部实现的很多功能包括：

  • 音频管道：核心引擎完全是客户端。它连接了Web Audio API来处理local files、麦克风输入或系统音频捕捉。
  • 视觉效果：渲染是由butterchurn，OpenGL 2 MilkDrop的传移版本，超越400个默认预设。将有序真实时FFT数据从音频管道传递给shader渲染器，解决实时捕捉和帧率优化这是非常有趣的挑战。在本次发版里，我也在这里添加了将您喜欢的预设打包成Json文件并导出导入功能，以便您的预设更轻松备份或分享！
  • 后台：虽然视觉化运行在本地，但我仍然建立了一个完整的AWS无服务器后台来支持横跨设备设置同步以及Spotify OAuth控制播放和元数据。(注：你仍然可以轻松地将Spotify应用或浏览器选项卡中的音频作为系统音频捕捉来视觉化，你不需要Spotify OAuth。然而，所有内置的控制元数据的相关接口都被锁在后台API里）。
  • 全局支持：为了使应用尽可能地支持多语言，实现了全面的国际化支持。 UI当前还支持8种语言。
  • 全景：项目整体是一个NPM工作区单仓库。CI/CD所有工作流程已经由GitHub Actions在5种不同浏览器上自动化，包括单元测试和对使用Playwright实现的端到端流程检查。

链接：

  • 直接进入：https://mangowave.app
  • GitHub仓库：https://github.com/Louis-Mascari/MangoWave