有没有可能样式化 html5音频标签？

标签的外观是依赖于浏览器的，但是你可以隐藏它，构建你自己的界面，并使用 Javascript 控制播放。

太棒了！带有“ control”属性的 HTML5音频标签使用浏览器的默认播放器。您可以通过不使用浏览器控件，而是滚动自己的控件并通过 javascript 与音频 API 对话来根据自己的喜好对其进行定制。

幸运的是，其他人已经这样做了。我最喜欢的球员现在是 JPlayer，它是非常风格和工程伟大。看看这个。

要改变播放器的颜色，只需要在你的 css 文件中添加音频标签，例如，在我的一个站点上，播放器变得不可见(白底白字) ，所以我添加了:

audio {
background-color: #95B9C7;
}

这将球员改变为浅蓝色。

如果你想在 CSS 中设计浏览器的标准音乐播放器:

audio {
enter code here;
}

肯也说对了。

css标签:

audio {


}

会有结果的。似乎它不希望球员任何高度以上或低于25像素，但宽度可以缩短或加长到一定程度。

这对我来说已经足够好了; 看这个例子(警告，音频自动播放) : 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

参考文献: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F

是的: 你可以隐藏内置的浏览器用户界面(通过从 audio中移除 controls属性) ，而是构建你自己的界面并使用 Javascript (来源)控制播放:

<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 按照自己的意愿设计元素的样式。

MDN HTMLAudioElement API 引用

一些色彩调整

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;
}

缺少最重要的一个集装箱:

&::-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，而不适用于 Firefox... ..。

您可以使用 HTMLMediaElementApi 创建自己的 使用 html/css 的音频播放器。这可能是唯一的选择。因为默认播放器不能设置样式。

如果你正在使用 Chrome，在 Chrome 开发工具设置中打开 “显示用户代理影子 DOM”

现在你可以看到所有的赝品

audio::-webkit-media-controls-panel


audio::-webkit-media-controls-mute-button


audio::-webkit-media-controls-play-button


...

现在你可以设计它们了

audio::-webkit-media-controls-mute-button {
display: none;
}