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

【问题标题】：Change audio background color in HTML5 using css使用 css 更改 HTML5 中的音频背景颜色
【发布时间】：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

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案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

【讨论】：