自定义音频标记的 CSS

Question

我有这个音频控件，我试图改变播放器的颜色，但我无法定位它，我发现一些帖子谈论使用 JavaScript 执行此操作是为其编写 CSS 的唯一方法。

<audio controls class="radio-audio">
<source src="" type="audio/mpeg"></audio>

我试图编写一些这样的代码，在互联网上的某个地方找到了它，但我仍然没有看到任何变化。

一切都在徘徊和专注，没有做太多事情

.radio-audio:hover, .radio-audio:focus, .radio-audio:active {
-webkit-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
.radio-audio {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow: 2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
}

Answer 1

我已经为您准备了一个codepen.io具有所有 css 标签的模型来访问音频对象的图形属性

链接

Answer 2

目前没有办法使用 CSS 来设置 HTML5 播放器的样式。相反，您可以关闭control属性，并使用 JS 实现您自己的控件。如果你不想自己做，你可以使用jPlayer这样的东西。