如何样式html5音频标签？

Question

我如何更改玩家的颜色？

Answer 1

controls

删除

audio

属性），而是构建自己的界面并使用JavaScript（

Source

）来控制播放：

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

然后，您可以使用css.

，您可以设计元素。

MDN

HtmlaudioElementAPI参考

<audio>

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

Answer 2

Https：//chromium.googlesource.com/chromium/blink/blink/blink/72fef91ac1ef679207f51def81def8133b336a658885885888f/source/source/core/core/core/cssss/mediacontrols.css/mediacontrols.css？

各种色调

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

Answer 3

luckily，其他人已经这样做了。 我现在最喜欢的球员是

杰佩尔

，它的风格非常好，而且效果很好。 检查一下

Answer 4

对控件的最重要的IMO imo容器

::-webkit-media-controls-enclosure：：

Answer 5

Answer 6

现在您可以看到所有的伪

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

...

Answer 7

现在您可以为它们设计

audio::-webkit-media-controls-mute-button {
  display: none;
}

ken也有正确的

a

css

标签：

audio {

}

将为您带来一些结果。 似乎它不希望玩家以上或低于25px的任何高度，但可以缩短或延长宽度。

对我来说足够好；请参阅此示例（警告，音频自动播放）：

www.thenewyorkerdeliinc.com

Answer 8

仅更改播放器的颜色，只需在您的CSS文件中处理音频标签，例如，在我的一个网站上，玩家变得不可见（白色），所以我补充说：

audio {
    background-color: #95B9C7;
}

这将玩家变成浅蓝色。
    

是的，有可能来自 @fábiozangirolami答案

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}

我在音频组件上进行了一些自定义。这是我所做的。

audio {
/*border-radius: 90px;*/
width: 250px;
height: 45px;
margin-top: 5px;
margin-bottom: 5px;
}

audio::-webkit-media-controls-mute-button {
display: none !important;
}

audio::-webkit-media-controls-volume-slider {
display: none !important;
}

audio::-webkit-media-controls-volume-control-container.closed {
display: none !important;
}
audio::-webkit-media-controls-volume-control-container{
display: none !important;
}

I发现这些自定义仅适用于Edge和Chrome。不是firefox..

Answer 9

<audio controls style="width: 500px; height: 50px">
    <source src="sample.mp3" type="audio/mp3" />
</audio>

如果您想在CSS中造型浏览器标准音乐播放器：

Answer 10

audio {
    enter code here;
}