开源了一个音频可视化视频编辑器，前后端从零写的
之前做音乐平台，需要一个能把音频渲染成可视化视频的功能。
找到了 specterr.com，效果挺符合需求的，但没有开源，也没法直接集成。想着功能也不是黑魔法，就自己照着产品逻辑从零写了一个。
项目叫 Spectral：https://github.com/charmlinn/spectral
能做什么
在浏览器里编辑音频可视化项目，实时预览效果，导出成视频文件。
支持波形、频谱、粒子、歌词轨道、backdrop 媒体、logo 叠加这些。
写这个最头疼的一个问题
浏览器预览一套逻辑，后端渲染另一套，效果总对不上。
所以这个项目的核心设计就一条：前端预览和后端 Worker 尽量共用同一份数据结构和同一套渲染实现。
后端用 Headless Chromium 加载同一个 PixiJS Runtime ，逐帧 capture PNG ，再 ffmpeg 编成视频。不完美但至少不会两边跑出两种效果。
技术栈
- Monorepo：pnpm workspaces + Turbo
- Web：Next.js 16 / React 19 / TypeScript
- 渲染：PixiJS
- 音频分析：Web Audio / FFT
- 数据库：PostgreSQL + Prisma
- 队列：Redis + BullMQ
- 存储：Cloudflare R2 / 本地 MinIO
- Worker：Node.js + Chromium DevTools Protocol + ffmpeg
- 本地环境：Docker Compose
目前状态
链路是通的，本地 pnpm dev:all 起来可以走完编辑 → 导出 → 视频产物的完整流程。
不是什么成熟产品，更像一个可以跑起来研究的东西。README 有完整本地启动教程，pnpm smoke:export 可以跑一次端到端测试。
对 PixiJS 可视化、前后端渲染同构、或者音乐类产品感兴趣的可以看看，欢迎聊。
No Comments Yet
Select Language