是否可以设置 html5 音频标签的样式？

Posted 2023-02-25

技术标签:

【中文标题】是否可以设置 html5 音频标签的样式？【英文标题】：Is it possible to style html5 audio tag? 【发布时间】：2010-11-08 18:18:15 【问题描述】：

我还没有找到任何关于如何做到这一点的资源。像改变播放器颜色这样简单的东西会很好:)

【问题讨论】：

不同的浏览器对音频元素的样式有不同的反应 - ***.com/a/27765938/325251 是的，而且它看起来最糟糕。他们怎么能让它看起来这么糟糕？视频样式跨浏览器回答advprog.blogspot.co.uk/2013/07/… @Mousey 不幸的是，这根本不是跨浏览器。只有 Webkit 和 Opera。 【参考方案1】：

<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

【讨论】：

表现不佳但很有用的 CSS 选择器！你能举例说明如何使用这些吗？只是示例代码？这仅支持基于 webkit 的浏览器（例如不支持 Firefox、IE 等）非常好的黑客攻击，这是正确的答案，非常感谢！我改变了音频标签的风格，没有痛苦和额外的 JS 代码，ViVa Fabio 似乎是从gist.github.com/afabbro/3759334复制/粘贴【参考方案2】：

是的：您可以隐藏内置浏览器 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 为元素设置任何您希望的样式。

MDNhtmlAudioElement API reference

【讨论】：

这个（.play）肯定不能在ios上运行，因为它被阻止了（见***.com/questions/31776548/…） @user1432181 您的回复似乎不正确。您链接到的问题是 iOS 阻止自动播放并要求播放由用户交互启动。此答案中提供的代码在单击事件之后运行。完整而简单的答案，实际上回答了问题并且不涉及第 3 方 bs（涉及依赖和责任），这也恰好让我一开始就没有看到这一点。把?我喜欢的地方。【参考方案3】：

是的！带有“controls”属性的 HTML5 音频标签使用浏览器的默认播放器。您可以根据自己的喜好自定义它，方法是不使用浏览器控件，而是滚动您自己的控件并通过 javascript 与音频 API 对话。

幸运的是，其他人已经这样做了。我现在最喜欢的播放器是jPlayer，它的风格非常好，效果很好。看看吧。

【讨论】：

所以答案是“不，不可能，你必须使用外部播放器”？ @Fernando：确实有可能。这回答了“有可能吗？”的问题谢谢@dsschnau。我发表了我的评论，因为问题是关于样式化 html5 video 标签，所有答案或多或少都像 是的，有可能，使用其他标签。 jplayer 如果您不想使用开箱即用的其中一种皮肤，则不容易自定义。我想要一个简单的玩家——小巧且易于剥皮。那么，这真的是“不”吗？滚动您自己的 UI 与固定现有标记不同。【参考方案4】：

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

【讨论】：

【参考方案5】：

一些颜色调整

audio 
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;

【讨论】：

这是一种快速而肮脏的方式来改变播放器的基本颜色，非常好用我掸掉了我的登录凭据以登录，对此表示赞同，然后说“谢谢”。【参考方案6】：

肯也做对了。

css 标签：

audio

会给你一些结果。似乎它不希望播放器的任何高度高于或低于 25px，但宽度可以缩短或延长到一定程度。

这对我来说已经足够了；看这个例子（警告，音频自动播放）：www.thenewyorkerdeliinc.com

【讨论】：

对我来说，一个大问题是 Internet Explorer。尽管宽度设置为 150 像素，但它看起来很糟糕，颜色不同，尺寸也比其他浏览器播放器大得多如果你需要让 IE9+ 播放器进入一个小空间，25px 的高度和 100px 的宽度对我来说很有效。我认为 25px 的高度是关键，但无论出于何种原因，更大的数字都不起作用。链接失效了【参考方案7】：

缺少最重要的一个 IMO 控件容器::-webkit-media-controls-enclosure：

&::-webkit-media-controls-enclosure 
    border-radius: 5px;
    background-color: green;

【讨论】：

【参考方案8】：

要仅更改播放器的颜色，只需在您的 css 文件中处理音频标签，例如在我的一个网站上，播放器变得不可见（白底白字），所以我添加了：

audio 
    background-color: #95B9C7;

这将播放器更改为浅蓝色。

【讨论】：

这不会改变我的播放器的颜色，它只是在它后面加上一个背景颜色。知道为什么吗？ @Tom 因为此解决方案不适用于更改播放器的默认灰色背景 :-) 与我的结果相同。这在 Chrome 和 Firefox 上不起作用，它似乎将颜色置于原始颜色之上，因此您会得到混合颜色，如果您尝试使用浅色，您将看不到任何颜色改变。【参考方案9】：

是的，有可能，来自@Fábio Zangirolami 的回答

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel 
                background-color: red;

【讨论】：

【参考方案10】：

我对音频组件进行了一些自定义。这就是我所做的。

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。不是火狐..

【讨论】：

【参考方案11】：

您可以使用 HTMLMediaElement Api 创建自己的audioplayer with html/css。这可能是唯一的选择。因为默认播放器无法设置样式。

【讨论】：

【参考方案12】：

如果你想在 CSS 中设置浏览器标准音乐播放器的样式：