使用 css 更改 HTML5 中的音频背景颜色

Posted 2023-02-25

【中文标题】使用 css 更改 HTML5 中的音频背景颜色

【英文标题】：Change audio background color in HTML5 using css

【发布时间】：2016-05-20 06:29:32

【问题描述】：

我搜索了很多东西，但没有找到任何有用的文档..我想更改音频标签的背景颜色，因为我知道 background-color 就足够了，但它不起作用..有什么解决方案可以改变它吗？可以改变吗？我不想使用任何插件..只是使用 CSS 我想改变..

代码：

<audio controls="">
  <source src="http://www.sousound.com/music/healing/healing_01.mp3" type="audio/mpeg">
</audio>

【问题讨论】：

Custom CSS for <audio> tag?的可能重复

@andrescpacheco 请在投票前先阅读我的问题..我不需要任何插件只有 css..我也看到了那个链接..如果我使用它，那么音频将像 jsfiddle.net/BDhara/pzdg2pjp/1 。 ..我只想改变背景颜色

已接受答案的第一行：“目前没有任何方法可以使用 CSS 设置 html5 播放器的样式。”

是的，那是六年前写的，所以我的问题的最后一行是is it possible?

你注意到它正在工作...jsfiddle.net/rajsharma1612/eg6ghhge

【参考方案1】：

audio::-webkit-media-controls-play-button,
     audio::-webkit-media-controls-panel 
     background-color: #000;
     color: #000;
     

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习

这可以在 Firefox 等非 webkit 浏览器中使用吗？如果没有为其他类型的浏览器添加一些 polyfill 或等效项，webkit 标签似乎不太可靠

【参考方案2】：

可以改吗？

仅通过 CSS 使用

简短的回答是不，这是不可能的。

音频播放器是由浏览器自己创建的对象，这就是为什么它看起来会根据您使用的浏览器而有所不同。

如果您想自定义播放器，使其适用于所有浏览器而不使用 3rd 方插件或脚本，您需要自己自定义和处理。

使用This DOM Reference 相当简单

您需要隐藏默认播放器并创建自己的按钮并引用音频对象。

例如，你可以给你的音频对象一个像“myAudio”这样的ID

<audio id="myAudio" controls="">
  <source src="http://www.sousound.com/music/healing/healing_01.mp3" type="audio/mpeg">
</audio>

现在您可以使用 javascript 和我上面链接的参考来控制它

var x = document.getElementById("myAudio"); 
x.play();
// OR
x.pause()

你也可以收听它的Media Events

x.onended = function()
   //do something when audio ends
;

创建一个具有搜索和计时器的高级玩家需要更多的努力和时间，但应该是严格而容易的。

如果您不想经历创建自己的按钮和功能的麻烦，则必须获取一个插件并在必要时自定义其 CSS。

更多信息：

HTML5 audio in detail

Creating your own custom audio player

HTML Audio/Video DOM Reference