【ESP32-P4 LVGL_V1.3】从 0 到 1 打造 LVGL 音乐播放器Home/Music/Status 三 Tab硬件Waveshare ESP32-P4-WIFI6-Touch-LCD-7B7 寸 1024×600 MIPI DSI 触摸屏框架ESP-IDF v5.5.5 LVGL 9.5.0 BSP 3.0.1作者谁暖了冬季日期2026-10-23一、前言之前用 STM32 做过很多项目但这是我第一次上手 ESP32-P4 这块多功能板子。7 寸大屏、MIPI DSI、带触摸、带音频 codec、还能插 SD 卡尺寸基本接近一块小车载屏了。这篇文章记录了我从「点亮屏幕」到「做出三 Tab 车载音乐 UI」的全过程主要包括- 环境搭建LVGL 三 Tab 界面ES8311 音频播放SD 卡挂载读歌动态视频背景中文字体显示Status 实时系统信息过程中踩了不少坑希望这些记录能帮你少走弯路。二、硬件准备2.1 你需要买的东西部件说明ESP32-P4-WiFi6-Touch-LCD-7B主控板 7 寸屏一体约 400 元小喇叭4 Ω 3 W接板载喇叭接口USB-C 线必须支持数据传输Micro SD 卡FAT328 GB 以上Class 10读卡器用于向 SD 卡拷贝素材2.2 接线USB-C 接电脑供电 烧录 串口日志喇叭接板上的 SPK / SPK-SD 卡插板载卡槽三、开发环境搭建Windows3.1 装 ESP-IDF v5.5.5去乐鑫官网下ESP-IDF Offline Installer选 v5.5.5。安装路径不要有中文和空格我装在C:\esp\esp-idf。Python venv 自动装到C:\Users\xx\.espressif\python_env\idf5.5_py3.13_env。RISC-V 工具链装到C:\Users\xx\.espressif\tools。装完后开始菜单会有 “ESP-IDF 5.5 PowerShell”用那个终端就能直接用idf.py。3.2 装 FFmpeg转音乐和视频素材要用下载ffmpeg.exe放到C:\esp\ffmpeg.exe。3.3 创建工程# 在 ESP-IDF PowerShell 里cd C:\esp# 从微雪官方例程复制基础工程09_lvgl_demo_v9# 这个例程已经帮你配好了 BSP、MIPI DSI、触摸四、第一步点亮屏幕先别管音乐和 UI先让屏幕亮起来显示个颜色条。微雪官方 BSP 已经把显示、触摸、背光都封装好了你只要#includebsp/esp-bsp.hvoidapp_main(void){bsp_display_cfg_tcfg{.lv_adapter_cfgESP_LV_ADAPTER_DEFAULT_CONFIG(),.rotationESP_LV_ADAPTER_ROTATE_180,// 我的板子要转 180 才正.touch_flags{.swap_xy0,.mirror_x0,.mirror_y0,},};lv_display_t*dispbsp_display_start_with_config(cfg);bsp_display_backlight_on();}坑 1一开始屏幕是倒的改ROTATE_180。坑 2触摸坐标反了改swap_xy/mirror_x/mirror_y我的配置是全 0。编译烧录idf.pyset-targetesp32p4 idf.py build idf.py-p COM6 flash五、第二步做三 Tab UI5.1 布局思路屏幕 1024×600我做成顶部 80px导航栏Home / Music / Status 三个按钮中间内容区右下角功能按钮5.2 代码结构// ui.cenum{PAGE_HOME,PAGE_MUSIC,PAGE_STATUS,PAGE_COUNT};staticlv_obj_t*s_pages[PAGE_COUNT];每个 Page 是一个全屏 obj切换时用lv_obj_set_page()。5.3 粒子动画Home 和 Status 页做了粒子背景——22 个小圆点随机飘动用lv_timer30 ms 刷新一次。#definePARTICLE_CNT22typedefstruct{lv_obj_t*circle;floatx,y,vx,vy;}particle_t;六、第三步音频播放踩坑最多6.1 硬件板载 ES8311 codec NS4150B 功放功放使能脚是GPIO53。6.2 踩坑记录坑 1顺序顺序顺序codec 必须在 display start之后初始化。因为 ES8311 走 I2C而 I2C 是 display 初始化时才起来的。顺序反了直接断言重启。// 正确顺序bsp_display_start_with_config();// 先屏幕audio_player_init();// 再音频坑 2必须立体声channel 2单声道没声音别问我怎么知道的。坑 3write 返回值esp_codec_dev_write()返回esp_err_t0 是成功不是写入字节数。一开始我当成字节数用来算进度全错了。坑 4功放脚要拉高GPIO53 手动gpio_set_level(53, 1)。坑 5分块写一次写 4KB不要一次写 40KB否则和 LVGL 抢 CPU 会卡顿。6.3 代码esp_codec_dev_handle_tspkbsp_audio_codec_speaker_init();esp_codec_dev_sample_info_tfs{.sample_rate16000,.channel2,.bits_per_sample16,};esp_codec_dev_open(spk,fs);esp_codec_dev_set_out_vol(spk,30);// 音量 30不要打满七、第四步SD 卡读歌7.1 挂载一开始我手动配 SDMMC 引脚死活挂不上。后来发现 BSP 已经封装好了#includeesp_vfs_fat.h#includebsp/esp-bsp.hbsp_sdcard_mount();// 一行搞定别手动配引脚BSP 内部已经配好了 LDO 电源和引脚CLK43, CMD44, D0-D339-42。7.2 准备音乐把 MP3 转成 16 kHz 立体声 PCMC:\esp\ffmpeg.exe-y-i把回忆拼好给你.mp3-ar 16000-ac2-f s16le song1.pcm一首 4 分钟的歌约 20MB。7.3 SD 卡目录E:\ └── music\ ├── song1.pcm ├── song2.pcm ├── song3.pcm └── song4.pcm7.4 播放器逻辑开一个 FreeRTOS task分块读 PCM 写入 codecwhile(sentsize!stop){fread(buf,1,4096,f);esp_codec_dev_write(spk,buf,4096);sent4096;}八、第五步动态视频背景8.1 思路ESP32-P4 解码 MP4 太费劲我用最土但最稳的办法提前抽帧。把 MP4 用 ffmpeg 抽成 30 张 RGB565 裸图每张 1024×600 1.2MB。运行时按 33ms 一帧从 SD 卡读出来显示。8.2 抽帧# 樱花视频抽 30 帧C:\esp\ffmpeg.exe-y-i sakura.mp4-vframes 30-vfscale1024:600-f rawvideo-pix_fmt rgb565le frame_%02d.raw3 个视频分别抽到frames/、frames2/、frames3/。8.3 显示staticlv_timer_t*video_timer;staticintframe_idx0;voidvideo_cb(lv_timer_t*t){charpath[64];snprintf(path,sizeof(path),/sdcard/img/frames/frame_%02d.raw,frame_idx);FILE*ffopen(path,rb);fread(psram_buf,1,1024*600*2,f);fclose(f);lv_image_set_src(img,img_dsc);// 刷新frame_idx(frame_idx1)%30;}lv_timer_create(video_cb,33,NULL);// 30fps注意buffer 要用heap_caps_malloc(..., MALLOC_CAP_SPIRAM)不要每帧 malloc会造成内存碎片。九、第六步中文字体LVGL 默认只有 Montserrat 英文字体中文显示方块。9.1 用 lv_font_conv 子集化只把需要的中文字谁暖了冬季开发首页音乐状态从黑体里抽出来生成 C 文件npx lv_font_conv--no-compress--format lvgl --font C:\Windows\Fonts\simhei.ttf --size 26--bpp 4 -o cn_font.c --range 0x20-0x7F --symbols谁暖了冬季开发首页音乐状态生成的cn_font.c只有 83KB比整字库小多了。9.2 用externconstlv_font_tcn_font;lv_obj_t*titlelv_label_create(parent);lv_label_set_text(title,谁暖了冬季);lv_obj_set_style_text_font(title,cn_font,0);十、第七步Status 页实时信息Status 页加了个半透明黑底卡片每秒刷新staticvoidstat_timer_cb(lv_timer_t*t){// CPUlv_label_set_text(cpu_lbl,CPU : 240 MHz);// Heapintfree_kbheap_caps_get_free_size(MALLOC_CAP_DEFAULT)/1024;snprintf(buf,...,Heap : %d KB free,free_kb);// SD 卡容量FATFS*fs;DWORD free_cl;f_getfree(/sdcard,free_cl,fs);uint64_ttotal(uint64_t)fs-n_fatent*fs-csize*512;// 运行时间uint32_tsecxTaskGetTickCount()*portTICK_PERIOD_MS/1000;}十一、最终效果Home粉紫天台少女背景 粒子飘 中央谁暖了冬季 / LVGL开发中文字幕Music樱花/银河/风铃三种动态视频背景切左侧播放控制右侧歌单4 首完整歌Status实时 CPU/Heap/SD/Uptime 显示—ESP32-P4 LVGL开发测试视频十二、常见问题Q: 没声音A: 检查1) codec 在 display 之后初始化2) channel23) GPIO53 拉高4) 喇叭接对了。Q: SD 卡挂不上A: 用bsp_sdcard_mount()别手动配引脚。Q: 视频一卡一卡A: SD 卡读速瓶颈。每帧 1.2 MB30 fps 需要 36 MB/sClass 10 卡勉强。Q: 中文方块A: 用 lv_font_conv 子集化字库别用全字库太大。十三、工程下载完整工程GitHub仓库链接注意并非包括所有测试内容因为素材较大无法上传GitHub一般用SD卡下载素材烧录命令python-m esptool--chip esp32p4-p COM6-b 460800 write_flash ^ 0x2000 build\bootloader\bootloader.bin ^ 0x8000 build\partition_table\partition-table.bin ^ 0x10000 build\lvgl_demo_v9.bin作者谁暖了冬季项目ESP32-P4 LVGL Demo版本v1.3