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

Question

我搜索了很多东西，但没有找到任何有用的文档..我想更改音频标签的背景颜色，因为我知道 background-color就足够了，但它不起作用..是否有任何解决方案可以更改它或者是否可以更改？我愿意不想使用任何插件..只是使用 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 方插件或脚本，您需要自己自定义和处理它。

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

例如，您可以为音频对象指定一个 id，如“myAudio”

<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 音频详细信息