设置音频 html 标记的样式

Posted 2023-02-25

【中文标题】设置音频 html 标记的样式

【英文标题】：Style the audio html tag

【发布时间】：2019-11-25 03:00:05

【问题描述】：

是否可以在音频标签中添加 css 样式？我试过了，但我做不到。

谢谢。

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

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

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

【问题讨论】：

你不能，但你可以制作你自己的播放器，然后按照你想要的方式设置它：***.com/questions/24367263/…

Is it possible to style html5 audio tag?的可能重复

【参考方案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" >
     </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

根据这个不完整的答案：Is it possible to style html5 audio tag?

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

【讨论】：

但对于非 webkit 浏览器是不可能的。

根据我在回答中的最后一个 cmets，几乎没有关于 -moz 或 -ms 前缀约定/支持 audio 标签的文档，所以不清楚是否有是 Firefox / IE 中的支持。 :)

是的，Firefox 不支持使用 CSS 设置播放器样式：developer.mozilla.org/en-US/docs/Web/HTML/Element/audio（请参阅“使用 CSS 设置样式”）。

我会争论足够的持久性，几乎一切皆有可能：@-moz-document url-prefix() audio background-color: red; transform: scale(1.7); margin-left: 100px; 使用特定于浏览器的标签可以实现一些非常基本/hacky 的样式

这不是一个完整的列表，它只是每个人复制/粘贴的同一个。这里还有几个，但我敢肯定还有更多。 ::-webkit-media-controls-enclosure::-internal-media-controls-cast-button

【参考方案2】：

您可以按照上面提到的答案设置音频标签的样式，但问题是它不支持大多数浏览器，这可能导致您的应用程序不具有跨浏览器兼容性，我建议您设计一个自定义播放器和制作音频标签之类的功能，对您来说更可行。