一个基于 HTML5 的音频可视化及歌词制作工具，支持音频播放、歌词制作、音频可视化和视频录制功能。
- 克隆项目到本地
- 打开
html/index.html文件在浏览器中 - 上传 MP3 文件和歌词文本
- 选择喜欢的可视化效果和歌词样式
- 点击"录制视频"按钮开始录制
- 主页面：
http://localhost:8000/html/index.html - 频谱分析页面：
http://localhost:8000/html/spectrumAnalyzer.html
👉 观看演示视频：https://www.douyin.com/video/7636443031087959305
- 核心特色功能，展示左右声道独立的512个频谱条，配合环形波、中心圆点和彩虹能量柱，打造震撼的立体声音响视觉效果。
- 支持20+种可视化效果一键切换，包括频谱类、粒子类、3D效果、宇宙类、自然类等多种风格，满足不同音乐的视觉需求。
提供歌词LRC解析、智能时间轴匹配、手动微调功能，调整一句歌词后自动同步后续时间轴，支持导出LRC格式文件。
专业级频谱分析工具，提供9种可视化模式、左右声道电平表、8个频率波段分析和乐器频率参考表。
左右喇叭效果是最具特色的可视化模式，模拟真实立体声音响系统：
- 🔊 立体声可视化：左右声道独立显示
- 📊 512个频谱条：每个喇叭显示512个频谱条，映射0-20kHz完整频率范围
- 🎨 智能颜色映射：低频（红-橙-黄）、中频（黄-绿-青）、高频（青-蓝-紫）
- 🌊 非线性放大：确保至少一半的频谱条能亮起来，增强视觉效果
- 🔥 动态阴影：频谱条随能量变化产生发光效果
- 🌊 环形波效果：根据音频能量显示动态环形波纹
- 🌟 中心圆点：主要响应低频能量（如鼓点），能量越大，圆点越大
- 🌈 声波扩散：声波以缓慢的速度向外扩散，增强视觉效果
- 🔗 中间连接线：显示左右声道的能量连接
- 📊 彩虹能量柱：左右两侧各25个格子，显示声道能量
| 类别 | 效果名称 |
|---|---|
| 频谱类 | 柱状频谱、柱状频谱2（全分辨率928条） |
| 波形类 | 波浪线（时域波形） |
| 粒子类 | 粒子爆炸（鼓点）、粒子效果（流动）、气泡（上升） |
| 3D效果 | DNA双螺旋、3D网格、莫比乌斯带、隧道 |
| 宇宙类 | 螺旋星系、星系、极光 |
| 自然类 | 涟漪、瀑布、山脉 |
| 风格类 | 赛博朋克（霓虹）、矩阵（代码）、万花筒（对称） |
| 动态类 | 歌词弹跳（人声）、心跳（脉冲）、闪电（脉冲） |
| 能量类 | 等离子、烟花、光环 |
| 环形类 | 圆形波纹（扩散） |
- 发光霓虹、渐变色彩、彩虹渐变、KTV模式、打字机效果、弹跳动画
- 中文字体：宋体、黑体、微软雅黑、仿宋、楷体
- 书法体：华文行楷、华文中宋、华文楷体、华文新魏
- � LRC 解析：支持标准 LRC 格式歌词文件导入
- ✏️ 智能匹配：自动分析音频能量，将 TXT 歌词智能匹配为 LRC 时间轴
- 🎯 手动微调：支持手动调整单句歌词时间，精确到毫秒
- 🔄 智能同步：调整一句歌词后，自动按比例同步后续所有歌词时间轴
- ↩️ 撤销支持：支持撤销操作，恢复到调整前的状态
- 📤 导出功能：调整完成后可导出为 LRC 格式文件
- 音频能量分析：分析音频的能量变化来检测人声起始点
- 动态规划：使用动态规划算法优化歌词与音频的匹配
- 智能分段：根据能量变化自动分段匹配歌词
- 在歌词列表中点击任意一句歌词进入编辑模式
- 拖动时间轴滑块或直接输入时间来精确调整该句歌词的出现时间
- 系统会自动根据调整后的时间，智能同步后续所有歌词的时间轴
专业级音频频谱分析工具，提供全面的音频可视化分析功能。
- 📊 FFT 频谱：标准快速傅里叶变换频谱显示
- 〰️ 时域波形：实时时域波形显示
- 📈 两者都显示：FFT频谱与时域波形同时显示
- 🌈 Spectrogram：频谱时间图，展示频率随时间的变化
- 📦 3D 频谱：三维立体频谱可视化
- ⭕ 环形频谱：环形布局的频谱显示
- ⚡ 能量球：能量球形态的音频可视化
- 🔮 Lissajous：李萨如曲线，展示左右声道相位关系
- 🥁 节拍可视化：专注于节拍检测和显示
- 📊 左右声道电平表：实时显示左右声道音量电平（dB）
- 🎯 当前频率：实时显示主频率峰值
- 📍 频谱质心：计算并显示频谱重心频率
- 📏 动态范围：显示音频动态范围
| 波段 | 频率范围 |
|---|---|
| 低音 | 0～500 Hz |
| 中低音 | 500Hz～1kHz |
| 中音 | 1kHz～1.5kHz |
| 中高音 | 1.5kHz～2kHz |
| 高音 | 2kHz～2.5kHz |
| 高音乐 | 2.5kHz～3kHz |
| 超高音 | 3kHz～3.5kHz |
| 极高音 | 3.5kHz～4kHz |
人声频率
| 类型 | 频率范围 |
|---|---|
| 男低音 | 80～350 Hz |
| 男中音 | 100～500 Hz |
| 男高音 | 150～700 Hz |
| 女低音 | 150～700 Hz |
| 女中音 | 200～800 Hz |
| 女高音 | 250～1.1k Hz |
| 人声基频 | 80 Hz～1.2k Hz |
| 人声清晰度/齿音 | 3k～6k Hz |
| 气声/齿音/嘶声 | 6k～10k Hz |
低频乐器（底、厚、沉）
| 乐器 | 频率范围 |
|---|---|
| 底鼓 Kick | 40～120 Hz |
| 贝斯 Bass | 30～200 Hz |
| 大提琴 | 40～500 Hz |
中高频乐器（亮、脆、穿透力）
| 乐器 | 频率范围 |
|---|---|
| 小提琴高频 | 3k～10k Hz |
| 钢琴高音区 | 3k～10k Hz |
| 镲片、吊镲 | 3k～15k Hz |
| 军鼓 | 3k～8k Hz |
| 弦乐泛音 | 5k～12k Hz |
高频乐器（空气感、细节、延伸）
| 乐器 | 频率范围 |
|---|---|
| 踩镲 Hi-hat | 8k～15k Hz |
| 铃、三角铁 | 8k～18k Hz |
- 🎥 多分辨率：支持 1080p、720p、480p、360p
- 🎬 帧率选择：支持 24、30、60 FPS
- 📦 编码格式：支持 H.264 和 H.265（HEVC）编码
- 📤 自动下载：录制完成后自动下载视频文件
- Web Audio API：用于音频处理、人声分离和能量分析
- Canvas API：用于音频可视化和视频录制
- MediaRecorder API：用于视频录制
- JavaScript：核心逻辑实现
- CSS3：样式和动画效果
- Canvas 绘制：使用 Canvas API 绘制左右喇叭和波形效果
- 音频分析：使用 Web Audio API 分析左右声道的音频数据
- 动态效果：根据音频能量动态调整喇叭的视觉效果
- 动画效果：使用 requestAnimationFrame 实现平滑的动画效果
- 非线性放大：使用幂函数和中位数阈值确保更多频谱条能亮起来
- FFT 分析：使用 Web Audio API 的 AnalyserNode 进行快速傅里叶变换
- 频率计算：精确计算每个频率 bin 对应的实际频率
- 能量分析：计算不同频率波段的能量分布
- 平滑处理：使用历史数据平滑频谱显示，避免闪烁
MP3-Visualization/
├── html/
│ ├── index.html # 主页面
│ ├── spectrumAnalyzer.html # 频谱分析页面
│ ├── styles.css # 样式文件
│ ├── app.js # 应用主逻辑
│ ├── audioVisualizer.js # 音频分析和可视化
│ ├── visualEffects.js # 视觉效果实现
│ ├── lyricsParser.js # 歌词解析和渲染
│ └── videoRecorder.js # 视频录制功能
├── mp3/ # 测试音频文件
│ ├── 10KHz-stero.wav # 10kHz正弦波测试音频（立体声）
│ ├── 1KHz-stero.wav # 1kHz正弦波测试音频（立体声）
│ ├── 20Hz-stero.wav # 20Hz正弦波测试音频（立体声）
│ ├── 20kHz.flac # 20kHz高频测试音频（FLAC无损格式）
│ ├── 16Hz-1600Hz-Exp-1f-10sec.mp3 # 16Hz-1600Hz指数扫描测试音频（10秒）
│ ├── 16Hz-20kHz-Exp-1f-10sec.mp3 # 16Hz-20kHz指数扫描测试音频（10秒）
│ ├── 16Hz-20kHz-Exp-1f-5sec.mp3 # 16Hz-20kHz指数扫描测试音频（5秒）
│ ├── 16Hz-20kHz-Lin-1f-10sec.mp3 # 16Hz-20kHz线性扫描测试音频（10秒）
│ ├── 16Hz-20kHz-Lin-1f-5sec.mp3 # 16Hz-20kHz线性扫描测试音频（5秒）
│ ├── 左右声道测试.mp3 # 左右声道分离测试音频
│ ├── 左右声道及喇叭极性Sound Check_Channel & Phase_10sec.wav # 声道和相位测试
│ ├── I Want You To Know 8d.mp3 # 8D环绕音效测试音频
│ ├── 飒沓如流星-和风.mp3 # 示例音乐文件
│ ├── 飒沓如流星-和风.lrc # 示例歌词文件（LRC格式）
│ └── 飒沓如流星-和风.txt # 示例歌词文件（TXT格式）
├── LICENSE # 许可证
└── README.md # 项目说明
| 文件 | 功能说明 |
|---|---|
index.html |
主应用页面，包含UI结构、控制按钮、画布元素和歌词显示区域 |
spectrumAnalyzer.html |
高级频谱分析页面，展示8个频率波段和乐器频率参考表 |
styles.css |
全局样式和动画效果定义 |
app.js |
应用核心逻辑，管理音频播放、歌词同步和用户交互 |
audioVisualizer.js |
音频分析类，处理Web Audio API、FFT分析和立体声分离 |
visualEffects.js |
视觉效果引擎，实现25+种可视化效果的Canvas渲染 |
lyricsParser.js |
歌词解析器，支持LRC格式解析、智能时间匹配和手动调整 |
videoRecorder.js |
视频录制器，支持多种分辨率、帧率和编码格式 |
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+
MIT License
- 感谢 Web Audio API 和 Canvas API 提供的强大功能
- 感谢所有贡献者的支持和反馈
享受音乐，享受创作！ 🎵✨