经验分享】esphome大屏幕上墙，阶段进展四，音频修复&自动化总控页面

gasment

上一篇：【经验分享】esphome大屏幕上墙，阶段进展三，电力&设备统计页面 - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!



esphome大屏幕上墙，阶段进展四
音频修复&自动化控制页面


页面预览：

基本就是一些button组织，为了防止乱动，设置了一个锁，解锁后才允许改动开关

动态演示：


此阶段的主要工作:

• 修复音频破音等问题，现在勉强可用
• 修复与esphome 2026.4.0 lvgl9的兼容性
• 更新了几个自用的外部组件，适配lvgl9，包括这个屏的mipi_dsi驱动，和一个截屏工具
• 写完了自动化的总控页面
  

1、修复音频问题
官方的i2s_audio组件，对一些编解码器和 D 类放大器组合，如我这款P4上的 ES8311 + NS4150B，音频重新开始播放时每次都会初始化i2s通道，会导致噼啪/咔哒的瞬态噪声。
翻找PR，发现了一个还没合并的修复：https://github.com/esphome/esphome/pull/15565
该PR确实有效，不过鉴于我这个开发板附带的喇叭过于辣鸡，只能用来做下提示音，提示音也不是每种都可以，需要有一定长度，短的音频直接就成了蜂鸣器。
而且音量有效区间也窄的可伶，不是没声就是破音
音频配置参考：

external_components:
  - source:
      type: local
      path: external_components
    components: [ i2s_audio]

switch:
  - platform: gpio
    id: sound_enable_sw
    pin: GPIO53
    restore_mode: ALWAYS_ON
    internal: true

  - platform: lvgl
    id: touch_sound_sw
    widget: lvgl_touch_sound_sw
    name: "Touch Sound"
    icon: "mdi:playlist-music"
    entity_category: "config"
    restore_mode: RESTORE_DEFAULT_ON


i2s_audio:
  - id: i2s_out
    i2s_lrclk_pin: GPIO10
    i2s_bclk_pin: GPIO12
    i2s_mclk_pin: GPIO13

  

audio_dac:
  - platform: es8311
    id: ex_es8311
    i2c_id: i2c_bus_1
    bits_per_sample: 16bit
    sample_rate: 48000

speaker:
  - platform: i2s_audio
    id: main_speaker
    dac_type: external
    i2s_audio_id: i2s_out
    i2s_dout_pin: GPIO9
    audio_dac: ex_es8311
    keep_alive: true
    channel: mono          # 单声道
    sample_rate: 48000
    bits_per_sample: 16bit
    buffer_duration: 1000ms

media_player:
  - platform: speaker
    id: audio_media_player
    task_stack_in_psram: true
    internal: true
    volume_increment: 2%
    volume_initial: 0.7
    volume_min: 0.6
    volume_max: 0.8
    announcement_pipeline:
      speaker: main_speaker
      format: FLAC          # FLAC 解码开销低
      num_channels: 1       # mono
      sample_rate: 48000
    files:
      - id: click_sound
        file: src/sound/click_v3.flac

复制代码

2、与LVGL 9的兼容性修复
esphome 2026.4.0从旧版的lvgl 8.4更新到了lvgl 9.5，性能提升没感觉到，兼容性问题却不少
主要的一个，就是对image图片的新渲染方法。
导致的问题：

• 默认8KB的loop_task_stack_size过小，会导致一些存在深层嵌套图片的页面加载时直接崩溃重启，需要配置：
  

esp32:
    advanced:
      loop_task_stack_size: 32768   #直接拉到最大32Kb

复制代码

• apng动图编译失败，放弃了这个方案，退回到animimg组件代替，不过需要写一大堆图片序列，然后用include引用，比较繁琐
  

- animimg:
                src: !include ../../../../src/pic/device_page/fan_animimg/animate_id.yaml
                align: LEFT_MID
                height: 30
                width: 30
                duration: 2000ms

复制代码

3、更新了自用的外部组件库

• MIPI_DSI驱动组件，没有新增功能，只做了新版的基础迁移：gasment/esphome_mipi_dsi_patch_for_jd9365_10_1_dsi_touch_a: A ESPHome MIPI-DSI Component Patch For WAVESHARE-10.1-DSI-TOUCH-A
• 原生截图组件，针对lvgl9，基本重写了，修复了原分支的截图花屏问题，在P4上工作良好，以后静态页面展示就不用拍屏这么捞了：gasment/esphome-lvgl-screenshot
  

external_components:
  - source:
      type: git
      url: https://github.com/gasment/esphome_mipi_dsi_patch_for_jd9365_10_1_dsi_touch_a
      ref: main
    components: [ mipi_dsi ]
    refresh: 24h

  - source:
      type: git
      url: https://github.com/gasment/esphome-lvgl-screenshot
      ref: main
    components: [lvgl_screenshot]
    refresh: 24h

lvgl_screenshot:
  port: 8080

复制代码

✅以上，未完待续