开始前适用开发板：ESP32-S3 Korvo · 开发框架：ESP-IDF
适用开发板：Korvo S3 · 工程
04.advanced.spectrum_box· targetesp32s3
前置：Audio FFT · MP3 Player
学习时长：约 25 分钟 · 难度：★★★★☆
学习目标
完成本节后，你将能够：
- 理解 MP3 播放 + FFT 频谱可视化的联合工作方式
- 掌握播放和频谱分析在不同 FreeRTOS 任务中的同步方法
- 了解产品级频谱动画的 UI 设计技巧
1. 这个例子在干嘛
一个 产品级频谱音箱——SPIFFS 中的 MP3 文件通过 Helix 解码播放到扬声器，同时对 PCM 数据做 FFT 频谱分析，LVGL Canvas 实时绘制精美频谱动画。集成了播放控制（播放/暂停/切歌/音量）。
生活类比：桌面 RGB 小音箱——播放音乐的同时屏幕显示跟着节奏跳动的频谱。
SPIFFS(MP3) → Helix解码 → PCM ──┬──→ ES8311(I2S) → 扬声器
│
└──→ FFT + Mel → LVGL Canvas 频谱动画
↑
LVGL UI (播放/暂停/音量)
与 audio_fft 的区别
| 对比 | audio_fft | spectrum_box |
|---|---|---|
| 音源 | 麦克风实时采集 | MP3 文件播放 |
| 播放控制 | 无 | 有（播放/暂停/切歌/音量） |
| UI 设计 | 基础频谱 | 产品级精美动画 |
| 复杂度 | 中 | 高（多任务协调） |
2. 编译烧录
cd Korvo_Firmware\04.advanced.spectrum_box
idf.py set-target esp32s3
idf.py build flash monitor
MP3 文件放入 spiffs_image/ 目录，编译时自动打包。
3. 运行现象
| 阶段 | 屏幕 | 声音 |
|---|---|---|
| 启动 | 频谱 UI + 歌曲列表 | 静音 |
| 播放中 | 频谱柱跟随节奏跳动 | 扬声器播放 |
| 暂停 | 频谱停止 | 静音 |
| 切歌 | 歌曲名更新 | 切换 |
4. 多任务协调
┌─────────────────┐
│ mp3_decode_task │ → Helix 解码 → PCM buffer (ring buffer)
└────────┬────────┘
│ PCM 数据共享（ring buffer + 信号量）
↓
┌─────────────────┐
│ audio_play_task │ → I2S 写入 ES8311 → 扬声器
└────────┬────────┘
│
┌─────────────────┐
│ fft_task │ → 取 PCM → FFT → LVGL Canvas 更新
└─────────────────┘
↑
┌─────────────────┐
│ LVGL UI task │ → 播放/暂停/音量按钮事件
└─────────────────┘
关键同步：FFT 任务不能直接读取正在播放的 PCM——需要通过 ring buffer 复制一份副本。
5. 常见问题与排查
| 现象 | 可能原因 | 解决方案 |
|---|---|---|
| 无曲目 | spiffs_image/ 空 | 放入 MP3 重新 build |
| 无声音 | 喇叭未接/PA 未使能 | 检查扬声器接线 |
| 频谱不动 | 播放已暂停 | 按播放按钮 |
| 杂音/破音 | MP3 码率过高 | 降至 128kbps |
| UI 卡顿 | FFT 计算占用过多 CPU | 降低 FFT 帧率 |
6. 动手改造建议
- 蓝牙音频：BLE 接收手机音频 → 播放 + 频谱
- WS2812 灯带：频谱数据同时驱动 RGB LED
- 网络电台：HTTP 流替代 SPIFFS 文件
- 歌词同步：LRC 歌词文件解析 + 显示
7. 下一步
| 方向 | 推荐例程 | 说明 |
|---|---|---|
| 纯频谱 | Audio FFT | 麦克风版 |
| MP3 基础 | MP3 Player | 纯播放 |
| P4C5 版 | P4C5 Spectrum | MIPI 大屏版 |
酷世DIY · Kevincoooool