audio标签自定义颜色

### 修改 HTML 音频播放器的颜色样式

为了自定义 `<audio>` 标签的外观，尤其是改变其颜色样式，通常需要依赖于浏览器支持的原生控件样式调整以及一些额外的技术手段。由于大多数现代浏览器对于媒体元素（如 `audio` 和 `video`）提供了有限的可定制化选项，直接通过 CSS 改变这些内置控件的具体视觉属性可能不会总是有效。

不过，在某些情况下，可以通过设置特定的 CSS 属性来影响音频播放器的整体风格：

#### 使用伪类和伪元素增强控制条的表现力

虽然无法完全重新设计默认按钮和其他交互部件的样子，但是能够利用 `-webkit-` 前缀下的私有属性去尝试微调部分组件的色彩表现[^1]。

/* 调整整个播放器背景 */
audio {
    background-color: #f0f0f0;
}

/* 尝试更改进度条轨道颜色 (仅限 WebKit 浏览器) */
audio::-webkit-media-controls-panel {
    background-color: #eaeaea !important;
}

/* 更改已缓冲区域的颜色 (WebKit 浏览器专属)*/
audio::-webkit-media-controls-buffered-bar {
    background-color: rgba(255, 87, 34, .5);
}

需要注意的是上述代码片段中的样式规则只适用于基于 Blink 或者 Webkit 内核开发的浏览器版本，比如 Chrome、Safari 等；而对于 Firefox 及其他非 Webkit 类型的产品，则需探索它们各自特有的解决方案。

#### 构建更灵活的用户体验——隐藏标准控制器并构建自己的界面

如果希望获得更高的自由度来自由设定每一个细节上的配色方案，最可靠的方法就是移除原有的操作面板，并借助 JavaScript 来创建一套全新的用户接口。这允许开发者精确指定每个按钮的状态变化逻辑及其对应的视觉反馈机制[^3]。

// 移除原有控件显示
const player = document.querySelector('audio');
player.setAttribute('controlsList', 'nodownload');

// 动态更新自定义UI状态...
let totalWidth = /* 获取容器宽度 */;
document.getElementById('circle').style.left =
    ((player.currentTime / player.duration) * totalWidth - 1) + "px";

这样做不仅可以让设计师随心所欲地装饰多媒体对象周围的环境，还能确保最终产品能够在各种设备上呈现出一致且美观的效果。