默认的html5的原生播放器 看着有点丑 来美化一下 改变它的颜色

修改两处
第一步：
把 height: 32px 放在 `admin/editor.md/plugins/audio-dialog/audio-dialog.js 这个里面第56行处如图

第二步：
将下面的代码放在你主题的style.css 最下面

代码如下

/* ------------------------------------------------音乐颜色修改 5blog.cn--原创--------------------------------------- */

    /* 播放/暂停按钮 */
    audio::-webkit-media-controls-play-button,
    audio::-webkit-media-controls-pause-button {
      background-color: #FF0099;
      border-radius: 50%;
    }

/* 静音按钮 */
audio::-webkit-media-controls-mute-button {
    background-color: red;
}

/* 全屏按钮（如果适用） */
audio::-webkit-media-controls-fullscreen-button {
    background-color: red;
}

    /* WebKit浏览器样式 (Chrome, Safari, Edge) */
    audio::-webkit-media-controls-panel {
      background-color:  rgb(255 157 0 / 95%);
    }

    /* 时间显示 */
    audio::-webkit-media-controls-current-time-display,
    audio::-webkit-media-controls-time-remaining-display {
      color: #000000;
      font-family: Arial, sans-serif;
      -background-color: #0bf1d5;
    }

    /* 进度条 */
    audio::-webkit-media-controls-timeline {
      background-color: #0bf1d5;
    }

    audio::-webkit-media-controls-progress-bar {
      background-color: red;
    }

        /* 进度条滑块(小圆点) */
    audio::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      background: red;
      border-radius: 50%;
      cursor: pointer;
    }

    /* 音量控制 */
    audio::-webkit-media-controls-mute-button,
    audio::-webkit-media-controls-volume-slider {
      filter: hue-rotate(-30deg) saturate(200%);
    }

    /* Firefox浏览器样式 */
    audio {
      --moz-range-track: #0bf1d5;
      --moz-range-progress: red;
      --moz-range-thumb: darkred;
    }

演示效果

https://5blog.cn/post-24.html