Question

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

代码：

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

Answer 1

可以改变吗？

仅使用CSS

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

音频播放器是浏览器 创建的对象 本身，这就是为什么它看起来会有所不同，具体取决于您使用的浏览器。

如果你想以一种适用于所有浏览器的方式自定义播放器而不使用第三方插件或脚本，你需要自己定制和处理它。

非常简单

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

例如，您可以为您的音频对象提供类似“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

Answer 2

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