【开源自荐】基于 Web Audio API 的音频可视化画布

[RylanBot]

开源地址

• 源码仓库：https://github.com/RylanBot/melody-canvas
• 在线网站：https://melody-canvas.rylan.cn/

项目介绍

Tip

「前言」
音频可视化在生活中能具体应用的场景不太多，更多是作为欣赏用的作品，
但我依旧希望这个项目能给未来有需要的开发者做一个参考。
它虽然是“纯前端”技术栈构建的，但里面涉及的 Web Audio API + Web Codecs API 是偏小众的，
以及实现了一些具体的音频分析算法，需要了解相关的数学/物理知识背景，我觉得还是很有趣的。

🌎 操作指引

（可以直接跳转到视频的 00:25 观看最终的成品）

Demo.mp4

🔥 功能介绍

💕 音频可视化

• 基于 Web Audio API，实现音频分析算法
• 支持多种类型元素的创建，提供灵活的自定义选项

💕 画布编辑

• 使用 FabricJS 库，实现可拖拽编辑器
• 支持图片和文本的添加，方便组合搭配

💕 视频导出

• 使用基于 WebCodecs API 的 WebAV 库，实现在浏览器环境下加工视频
• 支持视频在渲染的过程中，继续调整其它内容

[sun0225SUN]

泰酷辣，我会用到这个，感谢开源 🎉
大佬后面有啥规划，有想过把这个视觉效果渲染成视频嘛（我想用 Remotion 实现）
Canvas 引擎我想试试 LeaferJS，不知道大佬踩过坑没，FabricJS 虽然老牌但没 LeaferJS 看起来花，哈哈

[RylanBot]

泰酷辣，我会用到这个，感谢开源 🎉 大佬后面有啥规划，有想过把这个视觉效果渲染成视频嘛（我想用 Remotion 实现） Canvas 引擎我想试试 LeaferJS，不知道大佬踩过坑没，FabricJS 虽然老牌但没 LeaferJS 看起来花，哈哈

刚刚去简单了解了一下，Remotion 似乎要结合 NodeJS 服务端，但目前视频导出用的 WebAV 在纯客户端就可以实现 ✓
LeaferJS 我没有试过，如果要整个项目重写，工作量应该挺大的 👀 不过你可以实践一下…期待你的作品。

[sun0225SUN]

原来你现在可以导出视频，我刚没看到，我研究研究。
Remotion 确实需要无头的浏览器渲染，要接入业务的话，还有计算资源成本～

[KunYi]

很不錯的設計，感覺可以作為展演場所的燈光設計用! 可以去看看RDM/DMX512 燈光控制