之前做音乐平台，需要一个能把音频渲染成可视化视频的功能。
找到了 specterr.com，效果挺符合需求的，但没有开源，也没法直接集成。想着功能也不是黑魔法，就自己照着产品逻辑从零写了一个。
项目叫 Spectral：https://github.com/charmlinn/spectral
在浏览器里编辑音频可视化项目，实时预览效果，导出成视频文件。
支持波形、频谱、粒子、歌词轨道、backdrop 媒体、logo 叠加这些。
浏览器预览一套逻辑，后端渲染另一套，效果总对不上。
所以这个项目的核心设计就一条：前端预览和后端 Worker 尽量共用同一份数据结构和同一套渲染实现。
后端用 Headless Chromium 加载同一个 PixiJS Runtime ，逐帧 capture PNG ，再 ffmpeg 编成视频。不完美但至少不会两边跑出两种效果。
链路是通的，本地 pnpm dev:all 起来可以走完编辑 → 导出 → 视频产物的完整流程。
不是什么成熟产品，更像一个可以跑起来研究的东西。README 有完整本地启动教程，pnpm smoke:export 可以跑一次端到端测试。
对 PixiJS 可视化、前后端渲染同构、或者音乐类产品感兴趣的可以看看，欢迎聊。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。