我还没有找到任何关于如何做到这一点的资源。像改变播放器颜色这样简单的东西会很好:)
【问题讨论】：
标签的外观取决于浏览器，但您可以隐藏它，构建自己的界面并使用 Javascript 控制播放。
【讨论】：
是的！带有“controls”属性的 HTML5 音频标签使用浏览器的默认播放器。您可以根据自己的喜好自定义它，方法是不使用浏览器控件，而是滚动您自己的控件并通过 javascript 与音频 API 对话。
幸运的是，其他人已经这样做了。我现在最喜欢的播放器是jPlayer，它的风格非常好，效果很好。看看吧。
【讨论】：
要仅更改播放器的颜色，只需在您的 css 文件中处理音频标签，例如在我的一个网站上，播放器变得不可见（白底白字），所以我添加了：
audio {
background-color: #95B9C7;
}
这将播放器更改为浅蓝色。
【讨论】：
如果你想在 CSS 中设置浏览器标准音乐播放器的样式：
audio {
enter code here;
}
【讨论】：
肯也做对了。
css 标签：
audio {
}
会给你一些结果。似乎它不希望播放器的任何高度高于或低于 25px，但宽度可以缩短或延长到一定程度。
这对我来说已经足够了；看这个例子（警告，音频自动播放）：www.thenewyorkerdeliinc.com
【讨论】：
<audio>
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button
【讨论】：
是的：您可以隐藏内置浏览器 UI（通过从 audio 中删除 controls 属性），而是构建您自己的界面并使用 Javascript (source) 控制播放：
<audio id="player" src="vincent.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume += 0.1">Vol +</button>
<button onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
</div>
然后，您可以使用 CSS 为元素设置任何您希望的样式。
【讨论】：
一些颜色调整
audio {
filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
width: 200px;
height: 25px;
}
【讨论】：
是的，有可能，来自@Fábio Zangirolami 的回答
audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
background-color: red;
}
【讨论】：
缺少最重要的 IMO 控件容器 ::-webkit-media-controls-enclosure：
&::-webkit-media-controls-enclosure {
border-radius: 5px;
background-color: green;
}
【讨论】：
我对音频组件进行了一些自定义。这就是我所做的。
audio {
/*border-radius: 90px;*/
width: 250px;
height: 45px;
margin-top: 5px;
margin-bottom: 5px;
}
audio::-webkit-media-controls-mute-button {
display: none !important;
}
audio::-webkit-media-controls-volume-slider {
display: none !important;
}
audio::-webkit-media-controls-volume-control-container.closed {
display: none !important;
}
audio::-webkit-media-controls-volume-control-container{
display: none !important;
}
我发现这些自定义仅适用于 Edge 和 Chrome。不是火狐..
【讨论】：
您可以使用 HTMLMediaElement Api 创建您自己的audioplayer with html/css。这可能是唯一的选择。因为默认播放器无法设置样式。
【讨论】：