使用 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 音頻詳解