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

Question

我搜索了这么多的事情，但因此未发现任何有用的document..I想音频标签的改变背景颜色，因为我知道background-color就足够了，但它不是working..Is有任何解决方案来改变它或是否有可能改变?我不想使用任何插件..只是使用 CSS 我想改变..

代码：

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

Answer 1

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

Answer 2

有可能改变吗？

仅通过 CSS 使用

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

音频播放器是由浏览器本身创建的一个对象，这就是为什么它看起来会因您使用的浏览器而异。

如果您想在不使用第 3 方插件或脚本的情况下以适用于所有浏览器的方式自定义播放器，您需要自己自定义和处理它。

使用此 DOM 参考相当简单

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

例如，你可以给你的音频对象一个像“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()

你也可以收听它的媒体活动

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

创建具有搜索和计时器的高级播放器将花费更多的精力和时间，但应该是直截了当和容易的。

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

更多信息：

HTML5 音频详解