为音频HTML标签添加样式

Question

是否可以为音频标签添加CSS样式？我尝试过但没成功。

谢谢。

<li class="music">
    <div class="podcast">
        <div class="img-episodes-container">
            <img  src="images/podcast1.jpg" alt="microfono">
        </div>

        <h4>Lorem, ipsum dolor.</h4>

        <audio controls>
            <source src="sounds/sound1.mp3">
        </audio>
    </div>
</li>

- J P

---

你不能直接修改HTML5音频标签的控件颜色，但你可以自己创建一个播放器，并按照自己的喜好进行样式设置。你可以参考以下链接：https://dev59.com/V4Dba4cB1Zd3GeqPJ-Pg - Nathaniel Flick

可能是Is it possible to style html5 audio tag?的重复问题。 - Kaiido

Answer 1

这是可能的！

audio::-webkit-media-controls-panel {
  background-color: coral;
}

 <li class="music">
   <div class="podcast">
     <div class="img-episodes-container">
       <img src="images/podcast1.jpg" alt="microfono">
     </div>
     <h4>Lorem, ipsum dolor.</h4>
     <audio controls>
       <source src="sounds/sound1.mp3">
     </audio>
   </div>
 </li>

以下是完整列表:

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

根据这个不完整的答案: 是否有可能为html5音频标签设置样式?

请注意，这些是 Chrome / Webkit 支持的标签。对于 audio 元素，可能没有 Firefox / IE11 支持的标签，因为关于 -moz 或 -ms 前缀约定/支持的文档很少。

- EGC

---

但是对于非WebKit浏览器来说，这是不可能实现的。 - jmc

根据我在答案中的最后评论，关于audio标签的-moz或-ms前缀约定/支持几乎没有任何文档可供参考，因此目前尚不清楚Firefox和IE是否支持。 :) - EGC

是的，Firefox不支持使用CSS对播放器进行样式设置。请参考以下链接了解更多信息：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio（查看“使用CSS进行样式设置”部分）。 - Nathaniel Flick

我认为只要有足够的坚持，几乎任何事情都是可能的：@-moz-document url-prefix() { audio { background-color: red; transform: scale(1.7); margin-left: 100px; } } 使用特定于浏览器的标签可以实现一些非常基本/粗糙的样式化效果。 - EGC

这不是一个完整的列表，只是大家都复制粘贴的相同内容。这里还有几个，但我确定还有更多。 ::-webkit-media-controls-enclosure ::-internal-media-controls-cast-button - Spankied

Answer 2

你可以像上面提到的那样对音频标签进行样式设置，但问题是大多数浏览器不支持该功能，这可能导致你的应用程序在跨浏览器兼容性方面存在问题。我建议你设计一个自定义播放器，并实现类似音频标签的功能，这样更加可行。

- vinayakkyadav