1. 项目背景与硬件选型音乐频谱可视化是个很有意思的小项目能把看不见的声音变成动态的图形。最近用ESP32-S3做了个实时的音乐频谱显示器效果相当不错。这里分享一下我的实现过程从硬件选型到代码编写希望能给想玩音频可视化的朋友一些参考。先说硬件部分。核心器件就三样ESP32-S3开发板、声音传感器和TFT显示屏。ESP32-S3我选的是乐鑫官方的DevKitC开发板带WiFi和蓝牙双核240MHz主频性能足够跑FFT算法。声音传感器用的是常见的MAX9814模块自带自动增益控制实测在嘈杂环境下也能稳定工作。显示屏选了2.8寸的ILI9341驱动TFT屏分辨率320x240用SPI接口驱动刷新率能到60fps。这里有个小经验声音传感器最好选模拟输出的数字输出的PDM麦克风虽然接线简单但采样率固定后期处理不太灵活。我试过INMP441数字麦克风最后还是换回了MAX9814。TFT屏建议选带触摸功能的虽然这个项目用不上但以后扩展功能会方便很多。2. 音频采集与I2S配置音频采集是整个项目的基础。ESP32-S3有专用的I2S外设可以直接接声音传感器。配置I2S需要注意几个关键参数i2s_config_t i2s_config { .mode I2S_MODE_MASTER | I2S_MODE_RX, .sample_rate 44100, .bits_per_sample I2S_BITS_PER_SAMPLE_16BIT, .channel_format I2S_CHANNEL_FMT_ONLY_LEFT, .communication_format I2S_COMM_FORMAT_STAND_I2S, .dma_buf_count 8, .dma_buf_len 1024, .use_apll false, .intr_alloc_flags ESP_INTR_FLAG_LEVEL1 };采样率设为44.1kHz能覆盖人耳可听范围16位采样深度够用了。DMA缓冲区设大些可以减少CPU中断频率但会增加延迟。实际测试发现8个1024字节的缓冲区是个不错的平衡点。有个坑要注意I2S时钟有时会漂移导致采样率不准。解决方法是在配置里加上.fixed_mclk 256*44100用固定的主时钟。我在调试时就遇到过频谱总是偏移的问题折腾了好久才发现是时钟不稳导致的。3. FFT算法实现与优化FFT快速傅里叶变换是频谱分析的核心。ESP32有专门的FFT库比用纯软件实现快很多。关键代码如下fft_config_t *real_fft_plan fft_init(512, FFT_REAL, FFT_FORWARD, NULL, NULL); // 填充输入数据 for(int i0; i512; i){ real_fft_plan-input[i] (float)map(samples[i], INT16_MIN, INT16_MAX, -1000, 1000); } fft_execute(real_fft_plan); // 计算幅值 for(int i1; i256; i){ float mag sqrtf(real_fft_plan-output[2*i]*real_fft_plan-output[2*i] real_fft_plan-output[2*i1]*real_fft_plan-output[2*i1]); spectrum[i] map(mag, 0, 2000, 0, 100); }这里用了512点的FFT输出256个频点。实际测试发现点数太少频谱不够精细太多又会影响实时性。512点是个不错的折中在ESP32-S3上计算一帧只要2ms左右。有个优化技巧FFT输入数据可以先加个汉宁窗减少频谱泄漏。我试过不加窗时低频部分总是有杂散信号加上窗后就干净多了。ESP32的FFT库支持窗函数直接在fft_init里传个汉宁窗的数组就行。4. 频谱显示与LVGL集成最后是把频谱显示到TFT屏上。我用的是LVGL图形库它自带图表控件特别适合做这种动态显示。初始化图表这样设置chart lv_chart_create(lv_scr_act()); lv_obj_set_size(chart, 320, 240); lv_chart_set_type(chart, LV_CHART_TYPE_BAR); lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100); series lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);更新频谱数据时为了流畅我只更新变化的部分for(int i0; i60; i){ lv_chart_set_next_value(chart, series, spectrum[i*4]); }这里每4个频点合并显示一个柱状图既保留了主要特征又减少了绘制量。实测在240MHz主频下整个流程从采集到显示能做到20ms以内完全感觉不到延迟。LVGL的移植要注意内存分配默认配置可能不够。我在menuconfig里把LVGL的内存池调到了32KB否则刷新时会卡顿。另外双缓冲模式一定要开能显著改善显示效果。
ESP32-S3驱动TFT屏：基于FFT的实时音乐频谱可视化实践
1. 项目背景与硬件选型音乐频谱可视化是个很有意思的小项目能把看不见的声音变成动态的图形。最近用ESP32-S3做了个实时的音乐频谱显示器效果相当不错。这里分享一下我的实现过程从硬件选型到代码编写希望能给想玩音频可视化的朋友一些参考。先说硬件部分。核心器件就三样ESP32-S3开发板、声音传感器和TFT显示屏。ESP32-S3我选的是乐鑫官方的DevKitC开发板带WiFi和蓝牙双核240MHz主频性能足够跑FFT算法。声音传感器用的是常见的MAX9814模块自带自动增益控制实测在嘈杂环境下也能稳定工作。显示屏选了2.8寸的ILI9341驱动TFT屏分辨率320x240用SPI接口驱动刷新率能到60fps。这里有个小经验声音传感器最好选模拟输出的数字输出的PDM麦克风虽然接线简单但采样率固定后期处理不太灵活。我试过INMP441数字麦克风最后还是换回了MAX9814。TFT屏建议选带触摸功能的虽然这个项目用不上但以后扩展功能会方便很多。2. 音频采集与I2S配置音频采集是整个项目的基础。ESP32-S3有专用的I2S外设可以直接接声音传感器。配置I2S需要注意几个关键参数i2s_config_t i2s_config { .mode I2S_MODE_MASTER | I2S_MODE_RX, .sample_rate 44100, .bits_per_sample I2S_BITS_PER_SAMPLE_16BIT, .channel_format I2S_CHANNEL_FMT_ONLY_LEFT, .communication_format I2S_COMM_FORMAT_STAND_I2S, .dma_buf_count 8, .dma_buf_len 1024, .use_apll false, .intr_alloc_flags ESP_INTR_FLAG_LEVEL1 };采样率设为44.1kHz能覆盖人耳可听范围16位采样深度够用了。DMA缓冲区设大些可以减少CPU中断频率但会增加延迟。实际测试发现8个1024字节的缓冲区是个不错的平衡点。有个坑要注意I2S时钟有时会漂移导致采样率不准。解决方法是在配置里加上.fixed_mclk 256*44100用固定的主时钟。我在调试时就遇到过频谱总是偏移的问题折腾了好久才发现是时钟不稳导致的。3. FFT算法实现与优化FFT快速傅里叶变换是频谱分析的核心。ESP32有专门的FFT库比用纯软件实现快很多。关键代码如下fft_config_t *real_fft_plan fft_init(512, FFT_REAL, FFT_FORWARD, NULL, NULL); // 填充输入数据 for(int i0; i512; i){ real_fft_plan-input[i] (float)map(samples[i], INT16_MIN, INT16_MAX, -1000, 1000); } fft_execute(real_fft_plan); // 计算幅值 for(int i1; i256; i){ float mag sqrtf(real_fft_plan-output[2*i]*real_fft_plan-output[2*i] real_fft_plan-output[2*i1]*real_fft_plan-output[2*i1]); spectrum[i] map(mag, 0, 2000, 0, 100); }这里用了512点的FFT输出256个频点。实际测试发现点数太少频谱不够精细太多又会影响实时性。512点是个不错的折中在ESP32-S3上计算一帧只要2ms左右。有个优化技巧FFT输入数据可以先加个汉宁窗减少频谱泄漏。我试过不加窗时低频部分总是有杂散信号加上窗后就干净多了。ESP32的FFT库支持窗函数直接在fft_init里传个汉宁窗的数组就行。4. 频谱显示与LVGL集成最后是把频谱显示到TFT屏上。我用的是LVGL图形库它自带图表控件特别适合做这种动态显示。初始化图表这样设置chart lv_chart_create(lv_scr_act()); lv_obj_set_size(chart, 320, 240); lv_chart_set_type(chart, LV_CHART_TYPE_BAR); lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100); series lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);更新频谱数据时为了流畅我只更新变化的部分for(int i0; i60; i){ lv_chart_set_next_value(chart, series, spectrum[i*4]); }这里每4个频点合并显示一个柱状图既保留了主要特征又减少了绘制量。实测在240MHz主频下整个流程从采集到显示能做到20ms以内完全感觉不到延迟。LVGL的移植要注意内存分配默认配置可能不够。我在menuconfig里把LVGL的内存池调到了32KB否则刷新时会卡顿。另外双缓冲模式一定要开能显著改善显示效果。
